キーフレームコードはこのアニメーションのように見えますか？

Question

私はCSS3アニメーションが新しく、アニメーションはhereが好きです。残念ながら、現在のプロジェクトでは使用できないjQueryに依存するjQueryイージングライブラリにアニメーションが存在します。

div3の幅をアニメーション化するためにCSS3キーフレームを使用してこのアニメーションを実装するにはどうすればよいですか？

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} 
}