CSSアニメーション短縮形プロパティの値の順序が次のような場合：アニメーション：[名前] [継続時間] [タイミング機能] [遅延] [反復カウント] [方向] [フィルモード] [プレイ状態];下のCSSはどのように意味がありますか？CSSアニメーション省略形プロパティ構文の順序
animation: coffee-labels-active 0.5s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) both;
それは[遅延] [タイミング機能]前と塗りつぶしモードがbothであることを来ていることが表示されます。 これらの値の順序で遊ぶことができますか？
実際、アニメーション短縮形プロパティは他のCSS構文のように厳密な順序に従わないようです。ここに例があります：
私たちはtiming function, followed by delayを持っています。
element2クラスの場合、delay followed by timing functionがあります。
element3クラスの場合、I randomized all of the animation propertiesで、出力は同じです。
したがって、私たちが想定したことを結論づけることができます。私はあなたが答えに反応したことがない参照
.element {
height: 250px;
width: 250px;
margin: 0 auto;
background-color: red;
animation: stretch 1.5s ease-out 0s alternate infinite none running;
}
.element2 {
height: 250px;
width: 250px;
margin: 0 auto;
background-color: red;
animation: stretch 1.5s 0s ease-out alternate infinite none running;
}
.element3 {
height: 250px;
width: 250px;
margin: 0 auto;
background-color: red;
animation: stretch ease-out 1.5s none running 0s alternate infinite ;
}
@keyframes stretch {
0% {
transform: scale(.3);
background-color: red;
border-radius: 100%;
}
50% {
background-color: orange;
}
100% {
transform: scale(1);
background-color: yellow;
}
}
body,
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}<div class="element"></div>
<div class="element2"></div>
<div class="element3"></div>
、あなたはそれを評価したり、それが役に立ったと評価していた場合、それをマーク願っています。乾杯。 –
ありがとう！素晴らしい説明。それを立証した。私のような新しいコーダーの場合、値が厳密な順序に従えば、私は何を見ているのか分かります。 – wallwalker
誰もそれに答えなかったので、それをマークすることができましたが、とにかくあなたの歓迎:) –