CODEWITHSUNDEEP
cssanimationcss-animations
Railton Santos
Railton Santos

Reputation: 45

How can I jump to another stage of my animation on CSS keyframes?

I just wanna jump to another stage of my animation.. ex: after the 100% animation jump to 25% instead 0%..

@keyframes animation {
  0% { /*animation 1*/ }
  25% { /*animation 2*/ }
  50% { /*animation 3*/ }
  75% { /*animation 4*/ }
  100% { /*animation 5 // and jump to 25% instead 0%*/ }
}

EDIT1: Here is a very simple example.. the first stage is WHITE, but after I wanna keep it swapping in RED and GREEN..

EDIT2: Guys, I solved it using two different animations, as u can see bellow, thx for the answers! :D

        .test {
          display:block;
          width:50px;
          height:50px;
          animation: animatedBg 4s, animatedBg2 2s infinite 2s alternate;
        }

        @keyframes animatedBg {
          0% {
            background: white;
          }
            100% {
            background: red;
          }
        }

        @keyframes animatedBg2 {
          0% {
            background: red;
          }
            100% {
            background: green;
          }
        }
<div class="test"></div>

Upvotes: 3

Views: 2273

Answers (2)

Harry
Harry

Reputation: 89760

Note: Don't change the background image itself within keyframes as it is not supposed to work (and won't work) in FF, IE. You can find more info in this answer. If you are only swapping opacity then it is fine.

As far as I know there is no way to achieve the effect that you are looking for with only one animation. Instead you could have a look at using a combination of two animations like in the below snippet. Here the first animation fades color from white to green over 2.5s (= 50% of 5s) and this animation runs only one time (iteration count = 1). The second animation fades color from green to red over 2.5s. This one has a delay of 2.5s because it has to be idle while the first animation is running and then it executes in an infinite loop (iteration count = infinite). This produces the effect that you are looking for.

.test {
  display: block;
  width: 50px;
  height: 50px;
  animation: animatedBg1 2.5s 1, /* 2.5s because it was 50% and only 1 iteration for white to green */
             animatedBg 2.5s 2.5s infinite; /* wait 2.5s then infinitely loop the green to red */
}
@keyframes animatedBg1 {
  0% {
    background: white;
  }
  100% {
    background: green;
  }
}
@keyframes animatedBg {
  0% {
    background: green;
  }
  100% {
    background: red;
  }
}
<div class="test"><div>

Similarly below is a sample for your original animation. Here, I am assuming the animation-duration to be 5s, so the 25% keyframe will happen at 1.25s and thus the animation-duration for first one will be 1.25s. The second animation's duration will be the remaining 3.75s. Now since one frame is moved to a separate animation of its own (and duration has changed), the other keyframe percentages in the second animation will have to be different from the original one. For example, in your original animation the 50% keyframe would have happened at 2.5s and so in a two animation approach, it should happen at 1.25s of 2nd animation. 1.25s would mean a third of the 2nd animation's duration, so the percentage would 33%. Similarly the 75% keyframe in original animation would happen at 3.75s duration. It means that this should happen at 2.5s of the second animation which is nothing but two thirds of the second animation and thus gets 66% keyframe.

.test {
  display: block;
  width: 50px;
  height: 50px;
  animation: animatedBg1 1.25s 1, animatedBg 3.75s 1.25s infinite;
}
@keyframes animatedBg1 {
  0% {
    background: white;
  }
  100% {
    /* this should be the 25% keyframe */
    background: green;
  }
}
@keyframes animatedBg {
  0% {
    /* same as 25% keyframe */
    background: green;
  }
  33% {
    /* same as 50% keyframe, percentage different as duration has changed and we have moved one keyframe to a different animation */
    background: tomato;
  }
  66% {
    background: rebeccapurple;
  }
  100% {
    background: red;
  }
}
<div class="test">
  <div>

Upvotes: 3

Banzay
Banzay

Reputation: 9470

You can combine animation and transition effects, set animation-delay that would be equal transition duration and start animation from final settings of transition.

Here is an example:

.cont {
    height: 200px;
    background: #ccf;
}
.blk {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    background: #fc9;
    transition: all 2s ease;   
}
.cont:hover .blk {
    left: 200px;
    animation: anim 2s infinite; 
    animation-delay: 2s;
}

@keyframes anim {
    0% {
        left: 200px;
    }
    100% {
        left: 200px;
        top: 100px;
    }
    
}
<div class="cont">
<div class="blk">test</div>
</div>

Upvotes: 2

Related Questions