У меня есть CSS анимация, которая работает нормально, но слишком сильно замедляет скорость страницы.
Кто-нибудь знает, как я могу преобразовать этот код в скорость. js?
Я не понял, как я могу установить% как CSS или что-то в этом роде. Не имеет значения, если заметка точно такая же, я просто хочу такого рода эффект.
спасибо большое.
/* main div */
.logo {
text-align: center;
margin: auto;
}
.logo p{
font: 400 3vh "Oranienbaum";
color: #fee;
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000;
margin-right: auto;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
display: block;
text-align: center;
}
.logo b{
font: 400 10vh "Oranienbaum";
color: #fee;
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000;
margin-right: auto;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
display: block;
}
.logo b span{
animation: blink linear infinite 2s;
}
.logo b span:nth-of-type(2){
animation: blink linear infinite 3s;
}
@keyframes blink {
78% {
color: inherit;
text-shadow: inherit;
}
79%{
color: #333;
}
80% {
text-shadow: none;
}
81% {
color: inherit;
text-shadow: inherit;
}
82% {
color: #333;
text-shadow: none;
}
83% {
color: inherit;
text-shadow: inherit;
}
92% {
color: #333;
text-shadow: none;
}
92.5% {
color: inherit;
text-shadow: inherit;
}
}
<div class="logo">
<b>DOVE <span>SI</span>AM<span>O</span>?</b>
</div>