Ich versuche, einen Kaskadeneffekt zu erzeugen, indem ich auf jedes untergeordnete Element eine Animation anwende. Ich habe mich gefragt, ob es einen besseren Weg gibt als diesen:
.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;
}
und so weiter ... Im Grunde möchte ich eine Animation für jedes Kind haben, aber mit einer Verzögerung. Vielen Dank für jede Eingabe!
Ergänzung: Vielleicht habe ich nicht richtig erklärt, was mein Anliegen war: Es geht darum, wie man das macht, egal wie viele Kinder ich habe. Wie man das macht, ohne die Eigenschaften für jedes Kind aufschreiben zu müssen ... zum Beispiel, wenn ich nicht weiß, wie viele Kinder es geben wird.
animation
css
delay
css-selectors
Seka
quelle
quelle
-webkit-animation-increment
? Das wäre auf jeden Fall von Nutzen, gute Frage.Antworten:
Was Sie wollen, ist die Eigenschaft Animation Delay .
@keyframes FadeIn { 0% { opacity: 0; transform: scale(.1); } 85% { opacity: 1; transform: scale(1.05); } 100% { transform: scale(1); } } .myClass img { float: left; margin: 20px; animation: FadeIn 1s linear; animation-fill-mode: both; } .myClass img:nth-child(1) { animation-delay: .5s } .myClass img:nth-child(2) { animation-delay: 1s } .myClass img:nth-child(3) { animation-delay: 1.5s } .myClass img:nth-child(4) { animation-delay: 2s }
<div class="myClass"> <img src="http://placehold.it/200x150" /> <img src="http://placehold.it/200x150" /> <img src="http://placehold.it/200x150" /> <img src="http://placehold.it/200x150" /> </div>
Ein CSS-Präprozessor wie Less.js oder Sass kann die Anzahl der Wiederholungen verringern. Wenn Sie jedoch mit einer unbekannten Anzahl untergeordneter Elemente arbeiten oder eine große Anzahl animieren müssen, ist JavaScript die beste Option.
quelle
-webkit
Präfix (das in Chrome weiterhin unterstützt wird). Sie sollten die Version ohne Präfix hinzufügen (oder etwas wie Autoprexfixer ( github.com/postcss/autoprefixer ) verwenden, wenn dies funktionieren soll.Hier ist eine scss-Methode, um dies mit einer for-Schleife zu tun.
@for $i from 1 through 10 { .myClass img:nth-child(#{$i}n) { animation-delay: #{$i * 0.5}s; } }
quelle
In der [hoffentlich in der Nähe] Zukunft , wenn
attr
undcalc
werden voll unterstützt, werden wir in der Lage sein , dies ohne JavaScript zu erreichen.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)); }
Dies würde einen Effekt erzeugen, bei dem jedes Listenelement in einer scheinbar zufälligen Reihenfolge animiert wird.
quelle
.myClass li:nth-child(n) { transition-delay: calc(n*0.2s); }
sehr praktisch sein würde.transition-delay
dass Kind (n)0.5+(n*<somePrimeNumber> % 1.5)
keine wunderbare Formel ist, sondern zufällig für die Anzahl der Li's aussehen würde, die Sie möglicherweise hinzufügen würden. Meine Beschwerde besteht darin, dass ich für jedes Listenelement mehrere CSS-Auswahlen erstellen und diese dann erweitern muss, wenn ich eine Liste erhalte, die größer ist als für mein CSS vorbereitet. Es gibt zufällige Funktionen für SCSS und WENIGER, die jedoch in Frage gestellt werden. Daher kann meiner Frustration mit einfachem CSS nicht geholfen werden.Sie können auch die Eigenschaft für die Übergangsverzögerung in CSS verwenden und JS oder JQuery verwenden, um jedem untergeordneten Element eine andere Verzögerung zuzuweisen. (Angenommen, s ist die Startverzögerung in Sekunden)
$(".myClass img").each(function(index){ $(this).css({ 'transition-delay' : s*(1+index) + 's' }); });
So haben die Kinder die Übergangsverzögerungen wie 1 * s, 2 * s, 3 * s ..... und so weiter. Um den eigentlichen Animationseffekt zu erstellen, stellen Sie einfach den gewünschten Übergang ein und die Kinder werden in einer Sequenz animiert. Klappt wunderbar !
quelle
Wenn Sie viele Elemente haben (zum Beispiel: Ich habe eine Tabelle mit> 1000 Elementen paginiert und möchte, dass jede Zeile beim Laden der Seite mit Verzögerung animiert wird), können Sie jQuery verwenden, um dies zu lösen und eine Vergrößerung der CSS-Datei zu vermeiden. Die Animationsverzögerung nimmt dynamisch zu.
$.each($('.myClass'), function(i, el){ $(el).css({'opacity':0}); setTimeout(function(){ $(el).animate({ 'opacity':1.0 }, 450); },500 + ( i * 500 )); });
BEARBEITEN: Hier ist derselbe Code, den ich für die Verwendung mit animate.css angepasst habe (installieren Sie ein zusätzliches Plugin, bevor Sie https://gist.github.com/1438179 verwenden ).
$.each($(".myClass"), function(i, el){ $(el).css("opacity","0"); setTimeout(function(){ $(el).animateCSS("fadeIn","400"); },500 + ( i * 500 )); });
Wenn "fadeIn" der Animationstyp ist, "400" - Ausführungszeit der Animation, 500 - Verzögerung für jedes zu animierende Element auf der Seite.
quelle
So was:
.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...]
quelle