gologo

Animationen steuern mit 'anmation-delay', 'animation-fill-mode' und keyframes

Das HTML Markup besteht lediglich aus den zwei Buttons, 6 leeren Divs und einem Image.

HTML

<div class="flashHolder"><button class="isblog bt-gorange runFlash">RUN</button><button class="isblog bt-gorange resetFlash">RESET</button>
<div class="rContainer">
<div class="rBlock">&nbsp;</div>
<div class="rBlock">&nbsp;</div>
<div class="rBlock">&nbsp;</div>
<div class="rBlock">&nbsp;</div>
<div class="rBlock">&nbsp;</div>
<div class="rBlock">&nbsp;</div>
</div>
<div id="image-1"><img src="/image-path" />
</div>
</div>

Im CSS wird mit dem pseudo selector :nth-of-type(x) die unterschiedliche Farbigkeit und für die zusätzlichen Klassen 'over' und 'out' das animation-delay festgelegt.

Die Keyframes definieren die 3D Transformation. Damit dies Transformation nach Ablauf nicht einfach zurückgesetzt wird sondern erhalten bleibt , steht der animation-fill-mode auf forwards. 

CSS

button.runFlash, button.resetFlash {margin-bottom:5px;}
.flashHolder {position:relative;}
.rContainer:after{content:'';display:block;width:100%;clear:both;width:100%;position:relative;}
.rContainer{position:relative;z-index:100;}
.rBlock {width:calc(100% / 6);float:left;transform-style:preserve-3d;transform:perspective(1000px) rotateY(180deg);}
.rBlock:nth-of-type(1),.rBlock:nth-of-type(4) {background:#ff7F00;}
.rBlock:nth-of-type(2),.rBlock:nth-of-type(5) {background:#cdcdcd;}
.rBlock:nth-of-type(3),.rBlock:nth-of-type(6) {background:#666666;}
.rBlock.out {animation: rotor-out 1s ease-in-out;animation-fill-mode: forwards;}
.rBlock.over {animation: rotor-in 1.5s;animation-fill-mode: forwards;}
.rBlock.over:nth-of-type(2) {animation-delay:0.5s;}
.rBlock.over:nth-of-type(3) {animation-delay:1s;}
.rBlock.over:nth-of-type(4) {animation-delay:1.5s;}
.rBlock.over:nth-of-type(5) {animation-delay:2s;}
.rBlock.over:nth-of-type(6) {animation-delay:2.5s;}
.rBlock.out:nth-of-type(1) {animation-delay:2.5s;}
.rBlock.out:nth-of-type(2) {animation-delay:2s;}
.rBlock.out:nth-of-type(3) {animation-delay:1.5s;}
.rBlock.out:nth-of-type(4) {animation-delay:1s;}
.rBlock.out:nth-of-type(5) {animation-delay:0.5s;}
#image-1,#image-2 {position:absolute;right:0;z-index:150;width:30%;bottom:0%;opacity:0;}
#image-1 {transform:scale(0.3,0.3);}
#image-1.run {animation: image-1 2s ease-in;animation-fill-mode: forwards;animation-delay:1.3s;}

@keyframes rotor-in {
0% {transform: perspective(1000px) rotateY(180deg);}
100% {transform:perspective(1000px) rotateY(0deg);}
}
@keyframes rotor-out {
0% {transform: perspective(1000px) rotateY(0deg);opacity:1;}
100% {transform:perspective(1000px) rotateY(180deg);opacity:0;}
}
@keyframes image-1 {
0% {opacity:0;}
25% {opacity:0.5;}
100% {right:68%;opacity:1;transform:scale(1,1);}
}

Die Animation starten

der Click auf den Start Button fügt jedem rBlock die class="over" hinzu. Damit wird diesen das Animation-Delay zugewiesen. Nach dem Delay wird die in der @keyframes rotor-in Deklaration festgelegte 3D Animation ablaufen

Sobald diese erste Animation beim letzen rBlock fertig ist, werden die Klassen der rBlocks von over auf out gesetzt, die Delays für rotor-out gesetzt und dann läuft diese pro rBlock ab.

(function($){
$(window).bind("load resize orientationchange",function(e){
var rWidth = $('.rBlock').width();
$('.rBlock').css('height',rWidth);
});
$(document).ready(function(){
$('.runFlash').click(function(){
$('.rContainer').find('.rBlock').addClass('over').removeClass('out');
$('.over:last-of-type').bind('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function(e) {
$('.rBlock').removeClass('over').addClass('out');
$('#image-1').addClass('run');
// $('.rBlock:first-of-type').bind('webkitAnimationEnd oanimationend msAnimationEnd animationend',
// function(f) {
// });
});
$('.resetFlash').click(function(){
$('.rContainer').find('.rBlock').removeClass('out');
$('#image-1').removeClass('run');
})
})
});
})(jQuery);

Tags: html5 css3 JQuery

Kommentare  

#1 Guest 2017-04-08 10:23
Kommentar wurde vom Administrator gelöscht

Quick Menu

FacebookTwitterDiggGoogle BookmarksTechnoratiLinkedin