how to make a smooth transition from one css3 keyframe to other keyframe

Question

i have two css3 keyframes and trigger by some button, but the issue is when i try to adding a new keyframe (new class) the transition not change in smooth way, how to make this transition working smooth ?

source in fiddle here

.button { 
    width:50px;
    height:50px;
    background:silver;
}
.box {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
    top: 10%;
    left: 10%;
}
.box {
    animation: xx 2s linear infinite;
}
.boxShake {
    animation:boxShake 2s linear infinite;
}

No. It is not possible for two reasons (1) when the original animation is removed (no longer applicable), the element would snap back to its original position **and not transition** (FF does but Chrome and other browsers don't) like mentioned [here](http://stackoverflow.com/questions/31806649/how-to-run-the-css3-animation-to-the-end-if-the-selector-is-not-matching-anymore/31833533#31833533)... — Harry, Sep 15 '15 at 04:14
(2) Once a new value is applied to the transform property it overwrites the previous one (like mentioned [here](http://stackoverflow.com/questions/32224802/extend-the-final-state-of-the-first-animation-for-translated-element/32225884#32225884)) and so would again snap back to original position. — Harry, Sep 15 '15 at 04:14

score 3 · Accepted Answer · answered Sep 15 '15 at 20:57

One trick to achieve this is not to change the animation.

But make a composite animation transforming both the X and the Y in percentages.

Now, changing the width and the height of the element, we modify the amount of movement in one axis or the other of the unaltered animation

$(".button").click(function(){
 $("#mover").toggleClass("alternate");
});

.button { 
    width:50px;
    height:50px;
    background:silver;
}
.box {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
    top: 10%;
    left: 10%;
}
.box {
    animation: xx 2s linear infinite;
}
#mover {
    width: 0px;
    height: 20px;
    transition: width 2s, height 2s;
    animation: mover 2s linear infinite;
}
#mover.alternate {
    width: 5px;
    height: 0px;
}
@keyframes mover {
   0% {transform:translate(   0%,   0%);}
  10% {transform:translate(-100%,  20%);}
  20% {transform:translate( 100%,  40%);}
  30% {transform:translate(-100%,  60%);}
  40% {transform:translate( 100%,  80%);}
  50% {transform:translate(-100%, 100%);}
  60% {transform:translate( 100%,  80%);}
  70% {transform:translate(-100%,  60%);}
  80% {transform:translate( 100%,  40%);}
  90% {transform:translate(-100%,  20%);}
 100% {transform:translate(   0%,   0%);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Button</div>
<div id="mover">
<div class="box"></div>
</div>

Just play with the width and height of the 2 element states, and the transition between them, to adapt it to your needs

Nice effort :) Nothing against you but I think it is just too much complexity. — Harry, Sep 16 '15 at 06:29
@Harry Probably I wouldn't have tried if you hadn't say that it was not possible :-) And yes, the way to go should be Javascript. there are lots of libraries to handle that. — vals, Sep 16 '15 at 09:54

how to make a smooth transition from one css3 keyframe to other keyframe

1 Answers1