CODEWITHSUNDEEP
csscss-animations
Jayce Lin
Jayce Lin

Reputation: 447

add delayed time in css3 animation

I just set an animation to a div and it succeeded. Now I want to get it proved because its delay is too short! so how can I add the delayed time between animation (0% to 25%) and animation (25% to 50%) here is the code:

#flow{
      position:absolute;
      -webkit-animation:mymove 10s ease-in-out;
      -webkit-animation-iteration-count:3;
      -webkit-animation-delay:1s;
     }

@-webkit-keyframes mymove
    {
       0%{left:5px;}
       25%{left:127px;}
       50%{left:249px;}
       75%{left:371px;}
       100%{left:5px;}
     }

everyone!Thanks for your attention !I have found the answer but I don't know the Api of the definition of percentage in keyframes!And if you know sth about it ,just give me a hand ,thanks a lot!

@-webkit-keyframes mymove
{
   0%{left:5px;} 
   25%{left:127px;}
   26%{left:127px;}
   27%{left:127px;}
   28%{left:127px;}
   29%{left:127px;}
   30%{left:127px;}
   31%{left:127px;}
   32%{left:127px;}
   33%{left:127px;}
   34%{left:127px;}
   35%{left:127px;} 
   50%{left:249px;}
   75%{left:371px;}
   100%{left:5px;}
 }

Upvotes: 9

Views: 14226

Answers (3)

user2367101
user2367101

Reputation: 141

You can pause it playing with the percentages ( following your example ):

@-webkit-keyframes mymove
{
   0%{left:5px;} 
   25%{left:127px;}
   35%{left:127px;} 
   50%{left:249px;}
   75%{left:371px;}
   100%{left:5px;}
 }

you dont need to put all the percentages between 25% and 35%, the browser is ignoring them. you move from 0 to 25% from pixel 5 to 127, if your animation is 10 seconds it will take 2.5 seconds to do that, then pause 1 second between 25% to 35% since its the same pixel it wont move then continue to the next animation to pixel 249, it will take 1.5 seconds and so on...

hope this helps!

Upvotes: 0

Switchfire
Switchfire

Reputation: 556

I ran into this problem, as far as I can find, without jQuery you can't delay the frames.

You can delay the start of the animation. You can also get the animation to finish the same state as the original frame.

The mean one I use, is being able to do multiple animations, for example:

Your div:

 <div id="bannerImg" class="banner-RunAnimation"></div>

Run animation

.RunAnimation {
                      -webkit-animation: animation1 3s 0s 1 ease-in-out,
                      animation2 5s 5s 1 ease-out forwards;
             }

Animations:

@-webkit-keyframes animation1 { 
0%  {-webkit-transform: translateY(-0px);}
50% {-webkit-transform: translateY(-150px);}
100% {-webkit-transform: translateY(-150px); 
        opacity:0;}
}       

@-webkit-keyframes animation2 { 
0%  {transform: translateY(-0px);}
100% {transform: translateY(-150px);}
}

By delaying the animations and using opacity, you can do qutie a few things, if this doesn't help look into jQuery

Upvotes: 0

gefangenimnetz
gefangenimnetz

Reputation: 499

I don't think you can delay the single parts of an animation. What you could do, is to use two animations and start them with a delay.

#flow{
      position:absolute;
      -webkit-animation:
          mymove_first 10s 0s 10 ease-in-out,
          mymove_second 10s 2s 10 ease-in-out;
     }

@-webkit-keyframes mymove_first
    {
       0%{left:5px;}
       25%{left:127px;}
     }

@-webkit-keyframes mymove_second
    {
       50%{left:249px;}
       75%{left:371px;}
       100%{left:5px;}
     }

Upvotes: 9

Related Questions