9

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)

utter_step
  • 633
  • 7
  • 14
  • What do you mean by "previous" and "next" animate state? Do you have any play/pause button to toggle the animation state? – Passerby Jul 15 '13 at 03:19
  • Try [this](http://stackoverflow.com/questions/16150846/jquery-continous-back-and-forth-rotation-animation) Or [This](http://stackoverflow.com/questions/9536633/css-animations-change-a-property-without-a-transition) – Amol Jul 15 '13 at 04:07
  • @Passerby sorry for ambiguity. I wonder if I somehow _jump_ to next defined state (eg. I'm at 0%, or maybe 13%, and when I press "next", I want to get to the 50% state). – utter_step Jul 15 '13 at 05:12
  • Whats the goal of this? Do you mean 'now animate another element' or do you really want to animate only that particular element? If so, then make different css classes (.stage1, .stage2 ...) and switch it via JS – David Fariña Jul 15 '13 at 10:39
  • 1
    @DavidFariña I'm trying to make my own carousel script, beacuse I hadn't found any realisation that fits my needs. Animation of every element in carousel is simillar, it just differs in timing. So if we want just automatic carousel it's nice approach and it works great! But if we need to switch to the next element on arrow pressed - here we are with my need to go to the selected keyframe. – utter_step Jul 15 '13 at 11:02
  • So i guess you have a single element which you need to move on a command. If so, try splitting your elements as floating elements. That way, you can set the actual visible element to an active class and the active class can also handle your animation then. – David Fariña Jul 16 '13 at 09:15

1 Answers1

1

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

MarmiK
  • 5,639
  • 6
  • 40
  • 49