Я пытаюсь сделать анимацию похожую на аудио волны. Что не так с этим кодом?
Пытаюсь применить - translate to scale
, но это не помогает.
Может ли кто-нибудь, дать мне ссылку на некоторые примеры анимации?
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-perspective: 1000px;
perspective: 1000px;
}
div {
width: 400px;
height: 200px;
margin: 50px auto;
}
span {
display: inline-block;
background-color: green;
width: 20px;
height: 20px;
animation: wave 2s linear infinite;
}
.a1 {
animation-delay: 0s;
}
.a2 {
animation-delay: .2s;
}
.a3 {
animation-delay: .4s;
}
.a4 {
animation-delay: .6s;
}
.a5 {
animation-delay: .8s;
}
@keyframes wave {
0%, 50%, 75%, 100% {
height: 5px;
transform: translateY(0px);
}
25% {
height: 30px;
transform: translateY(15px);
background-color: palevioletred;
}
}
<div>
<span class="a1"></span>
<span class="a2"></span>
<span class="a3"></span>
<span class="a4"></span>
<span class="a5"></span>
</div>
Перевод вопроса: Making a wave animation @LCTS