Каким будет код ключевого кадра для этой анимации?

Question

Я новичок в анимации CSS3 и анимации, которая мне нравится here. К сожалению, анимация существует в библиотеке jQuery easings, которая будет иметь зависимость от jQuery, чего нет в моем текущем проекте.

Как реализовать эту анимацию с использованием ключевых кадров CSS3 для анимации ширины div?

Answer 1

Вы должны смотреть на крайних точках значений, и использовать их в качестве ключевой кадр. Кроме того, обратите внимание на различные функции синхронизации

.test { 
 
    width: 300px; 
 
    height: 40px; 
 
    background-color: lightgreen; 
 
    animation: grow 5s infinite; 
 

 
} 
 

 
@keyframes grow { 
 
    0% {width: 100px; animation-timing-function: ease-in} 
 
    30% {width: 600px; animation-timing-function: ease-out} 
 
    45% {width: 400px; animation-timing-function: ease-in} 
 
    60% {width: 600px; animation-timing-function: ease-out} 
 
    70% {width: 500px; animation-timing-function: ease-in} 
 
    84% {width: 600px; animation-timing-function: ease-out} 
 
    92% {width: 550px; animation-timing-function: ease-in} 
 
100% {width: 600px; animation-timing-function: ease-out} 
 
    
 
}

<div class="test"></div>

Answer 2

Ваш CSS будет выглядеть следующим образом:

.slide-width { 
     animation: slide-width 3s linear 0s forwards; 
     -webkit-animation: slide-width 3s linear 0s forwards; 
} 

и ключевые кадры были бы что-то вроде этого:

@-webkit-keyframes slide-width { 
    0% {width:50px} 
    100% {width:100px} 
} 
@keyframes slide-width { 
    0% {width:50px} 
    100% {width:100px} 
}