CODEWITHSUNDEEP
csscss-transitions
Riantori
Riantori

Reputation: 317

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

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;
}

Upvotes: 1

Views: 2278

Answers (1)

vals
vals

Reputation: 64164

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

Upvotes: 3

Related Questions