the following code contains a simple website that is supposed to display some text that changes with a short time interval. For some reason, this code works perfectly in chrome, edge, and firefox but not in safari. What can I do in order to fix this issue?
I couldn't find any tutorial for achieving this online, thanks in advance for your answers.
<!DOCTYPE html>
<head>
<style>
.wrapper {
position: absolute;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
}
.wrapper h2 {
padding: 0;
margin: 0;
color: white;
font-size: 30px;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
}
span:before {
content: '';
animation: animate infinite 9s;
}
@keyframes animate {
0% {
content: 'a better future';
font-family: 'Spectral', serif;
font-style: italic;
font-weight: 600;
}
50% {
content: 'a better life';
font-family: 'Spectral', serif;
font-style: italic;
font-weight: 600;
}
100% {
content: 'prosperity';
font-family: 'Spectral', serif;
font-style: italic;
font-weight: 600;
}
}
@media only screen and (max-width: 700px) {
body{
overflow: hidden;
}
.wrapper {
top: 50vh;
left: 50vw;
font-size: 15px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<h2>Investments for <span></span></h2>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire