我試圖通過將動畫應用于每個子元素來創建級聯效果。我想知道是否有比這更好的方法：.myClass img:nth-child(1){ -webkit-animation: myAnimation 0.9s linear forwards;}.myClass img:nth-child(2){ -webkit-animation: myAnimation 0.9s linear 0.1s forwards;}.myClass img:nth-child(3){ -webkit-animation: myAnimation 0.9s linear 0.2s forwards;}.myClass img:nth-child(4){ -webkit-animation: myAnimation 0.9s linear 0.3s forwards;}.myClass img:nth-child(5){ -webkit-animation: myAnimation 0.9s linear 0.4s forwards;}依此類推...因此，基本上，我希望每個孩子都有一個動畫開始，但要有一個延遲。感謝您的輸入！另外：也許我沒有正確解釋我所關注的問題：這與我有多少孩子無關。如何執行此操作而不必寫下每個孩子的屬性……例如，當我不知道會有多少個孩子時。
3 回答
人到中年有點甜
TA貢獻1895條經驗 獲得超7個贊
這是一種使用for循環的scss方法。
@for $i from 1 through 10 {
.myClass img:nth-child(#{$i}n) {
animation-delay: #{$i * 0.5}s;
}
}
Helenr
TA貢獻1780條經驗 獲得超4個贊
在[希望不久]將來時attr和calc被完全支持，我們就可以做到這一點沒有JavaScript。
HTML：
<ul class="something">
<li data-animation-offset="1.0">asdf</li>
<li data-animation-offset="1.3">asdf</li>
<li data-animation-offset="1.1">asdf</li>
<li data-animation-offset="1.2">asdf</li>
</ul>
CSS：
.something > li
{
animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));
}
這將產生一種效果，其中每個列表項都以看起來似乎是隨機的順序進行動畫處理。
- 3 回答
- 0 關注
- 956 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消