Анимированные веб-элементы используются как часть веб-дизайна в современных тенденциях веб-дизайна. Стилистика CSS3 предоставляет нам множество опций и функций по умолчанию, поэтому нам не нужно использовать несколько скриптов на одной веб-странице. Эта универсальная функция CSS3 помогает нам создавать привлекательные веб-страницы, не делая их тяжелыми.
Если вы используете анимацию для привлекательной доставки контента пользователям, вам пригодятся анимированные элементы со стрелками, например. Создатель этой анимированной стрелки создал ее, используя только CSS, чтобы вы могли легко использовать их в своем проекте.
HTML
Код
<div id="arrowAnim">
<div class="arrowSliding">
<div class="arrow"></div>
</div>
<div class="arrowSliding delay1">
<div class="arrow"></div>
</div>
<div class="arrowSliding delay2">
<div class="arrow"></div>
</div>
<div class="arrowSliding delay3">
<div class="arrow"></div>
</div>
</div>
CSS
Код
#arrowAnim {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.arrow {
width: 5vw;
height: 5vw;
border: 2.5vw solid;
border-color: black transparent transparent black;
transform: rotate(-45deg);
}
.arrowSliding {
position: absolute;
-webkit-animation: slide 4s linear infinite;
animation: slide 4s linear infinite;
}
.delay1 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.delay2 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.delay3 {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
@-webkit-keyframes slide {
0% { opacity:0; transform: translateX(15vw); }
20% { opacity:1; transform: translateX(9vw); }
80% { opacity:1; transform: translateX(-9vw); }
100% { opacity:0; transform: translateX(-15vw); }
}
@keyframes slide {
0% { opacity:0; transform: translateX(15vw); }
20% { opacity:1; transform: translateX(9vw); }
80% { opacity:1; transform: translateX(-9vw); }
100% { opacity:0; transform: translateX(-15vw); }
}
Демонстрация
