每個子元素都有延遲的CSS動畫

我試圖通過將動畫應用于每個子元素來創(chuàng)建級聯(lián)效果。 我想知道是否有比這更好的方法：

.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;

}

等等...所以基本上，我希望每個孩子都有一個動畫開始，但要有一個延遲。感謝您的輸入！

另外：也許我沒有正確解釋我所關注的問題：這與我有多少孩子無關。 如何執(zhí)行此操作而不必寫下每個孩子的屬性……例如，當我不知道會有多少個孩子時。

6個解決方案

52 votes

您想要的是動畫延遲屬性。

諸如Less.js或Sass之類的CSS預處理器可以減少重復的次數(shù)，但是如果您要使用未知數(shù)量的子元素或需要對大量子元素進行動畫處理，那么JavaScript將是最佳選擇。

CherryFlavourPez answered 2019-11-17T08:41:41Z

37 votes

這是一種使用for循環(huán)的scss方法。

@for $i from 1 through 10 {

.myClass img:nth-child(#{$i}n) {

animation-delay: #{$i * 0.5}s;

}

}

robshearing answered 2019-11-17T08:42:07Z

19 votes

在[希望不久的將來]完全支持attr和calc的情況下，我們將能夠在不使用JavaScript的情況下完成此任務。

HTML：

• asdf
• asdf
• asdf
• asdf

CSS：

.something > li

{

animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));

}

這將產生一種效果，其中每個列表項都以看起來似乎是隨機的順序進行動畫處理。

Steven Vachon answered 2019-11-17T08:42:43Z

17 votes

您還可以使用CSS中的transition-delay屬性，并使用JS或JQuery為每個子元素分配不同的延遲。 (假設s是啟動延遲，以秒為單位)

$(".myClass img").each(function(index){

$(this).css({

'transition-delay' : s*(1+index) + 's'

});

});

因此，孩子將具有過渡延遲，例如1 * s，2 * s，3 * s .....等等。 現(xiàn)在，要創(chuàng)建實際的動畫效果，只需設置所需的過渡，然后將按順序對子級進行動畫處理。 奇跡般有效 ！

Adk96r answered 2019-11-17T08:43:14Z

8 votes

如果您有很多項目(例如：我的分頁表中有超過1000個項目，并且希望在加載頁面時對每行進行延遲動畫處理)，則可以使用jQuery解決此問題并避免CSS文件的大小增加。 動畫延遲會動態(tài)增加。

$.each($('.myClass'), function(i, el){

$(el).css({'opacity':0});

setTimeout(function(){

$(el).animate({

'opacity':1.0

}, 450);

},500 + ( i * 500 ));

});?

編輯：這是我調整為與animate.css結合使用的相同代碼(在使用[https://gist.github.com/1438179]之前安裝其他插件)

$.each($(".myClass"), function(i, el){

$(el).css("opacity","0");

setTimeout(function(){

$(el).animateCSS("fadeIn","400");

},500 + ( i * 500 ));

});

其中“ fadeIn”是動畫類型，“ 400”-動畫執(zhí)行時間，“ 500-延遲”用于頁面上要動畫的每個元素。

Neolo answered 2019-11-17T08:43:53Z

0 votes

像這樣：

.myClass img {

-webkit-animation: myAnimation 0.9s linear forwards;

}

.myClass img:nth-child(1){

-webkit-animation-delay: 0.1s;

}

.myClass img:nth-child(2){

-webkit-animation-delay: 0.2s;

}

[...etc...]

peduarte answered 2019-11-17T08:44:13Z

總結

以上是生活随笔為你收集整理的动画延迟效果css,每个子元素都有延迟的CSS动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。