CODEWITHSUNDEEP
javascriptcsscss-animations
utter_step
utter_step

Reputation: 673

How to move to the certain keyframe in CSS3 animation?

Let's say we have an animation like here: http://jsfiddle.net/utterstep/JPDwC/

Layout:

<div>back</div>
<div class="animating"></div>
<div>forward</div>

And corresponding CSS:

@keyframes someanimation {
    0% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
    100% {
        width: 100px;
    }
}

.animating {
    width: 200px;
    height: 200px;
    background-color: red;
    animation: someanimation 5s infinite;
}

And I want to go to the next or previous animation state when I press back or forward. There can be more than one object and I would like to switch their animation states at the same time.

Is it someway possible via CSS or CSS+JS, or it maybe it will be easier for me just to rewrite my code in pure-JS? (currently I don't like this idea because I have a lot of properties to animate and CSS makes it much more easier for me)

Upvotes: 9

Views: 4474

Answers (1)

MarmiK
MarmiK

Reputation: 5775

Perhaps you have got the answer in CSS+JS

Please refer Old Post

Here on fiddle from the same post Fiddle

And with CSS only here is the Fiddle I have tweaked with :hover property, 

@-webkit-keyframes someanimation {
    0% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
    100% {
        width: 100px;
    }
}

@-moz-keyframes someanimation {
    0% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
    100% {
        width: 100px;
    }
}

@keyframes someanimation {
    0% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
    100% {
        width: 100px;
    }
}



@-webkit-keyframes someani2 {
    0%,100% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
}

@-moz-keyframes someani2 {
    0%,100% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
}

@keyframes someani2 {
    0%,100% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
}



.animating {
    width: 200px;
    height: 200px;
    background-color: red;
    -webkit-animation: someanimation 5s infinite;
    -moz-animation: someanimation 5s infinite;
    animation: someanimation 5s infinite;
}
.animating:hover{
    color:#f60;
    -webkit-animation: someani2 6s 1;
    -moz-animation: someani2 6s 1;
    animation: someani2 6s 1;
}
<div>back</div>
<div class="animating"></div>
<div>forward</div>

it changes the animation on hover, just like back button.

I hope this will solve your purpose..

Upvotes: 0

Related Questions