Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 animations: transition speed between animations too slow

CSS3 animations: transition speed between animations too slow

Problem

I've built a slider with the following animations. Unfortunately the transitions between the slides last too long. I haven't found a proper property for setting the speed between switching the slides.

/* Keyframes */

@-webkit-keyframes animation_slides {
  0% 
  {
    opacity:0;
  }
  6% 
  {
    opacity:1;
  }
  24% 
  {
    opacity:1;
  }
  30% 
  {
    opacity:0;
  }
  100% 
  {
    opacity:0;
  }
}

/* Animations on my ul li elements */

    -webkit-animation-name: animation_slides;
    -webkit-animation-duration: 30.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    &:nth-child(2)
    {
        -webkit-animation-delay: 6.0s;
        -moz-animation-delay: 6.0s;
    } 

    &:nth-child(3)
    {
        -webkit-animation-delay: 12.0s;
        -moz-animation-delay: 12.0s;
    } 

    &:nth-child(4)
    {
        -webkit-animation-delay: 18.0s;
        -moz-animation-delay: 18.0s;
    } 

    &:nth-child(5)
    {
        -webkit-animation-delay: 24.0s;
        -moz-animation-delay: 24.0s;
    }       

Can you please help me? Thank you very much in advance!

Problem courtesy of: christophe

Solution

There is no 'speed' per say value, but there is 'duration' and 'delay'. It looks like you can change the value of -webkit-animation-duration: 30.0s; to whatever you wish and correspondingly change all the nth-child -webkit-animation-delays and -moz-animation-delays the same proportion to affect the 'speed' of the transition

For example this would make the transitions half as long:

/* Animations on my ul li elements */

-webkit-animation-name: animation_slides;
-webkit-animation-duration: 15.0s; /* A value I changed */
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

&:nth-child(2)
{
    -webkit-animation-delay: 3.0s; /* A value I changed */
    -moz-animation-delay: 3.0s; /* A value I changed */
}  

&:nth-child(3)
{
    -webkit-animation-delay: 6.0s; /* A value I changed */
    -moz-animation-delay: 6.0s; /* A value I changed */
} 

&:nth-child(4)
{
    -webkit-animation-delay: 9.0s; /* A value I changed */
    -moz-animation-delay: 9.0s; /* A value I changed */
} 

&:nth-child(5)
{
    -webkit-animation-delay: 12.0s; /* A value I changed */
    -moz-animation-delay: 12.0s; /* A value I changed */
}       

So long as the proportion between the total duration and nth-child delays stay the same, it will change speed accordingly

Solution courtesy of: Zach Saucier

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 animations: transition speed between animations too slow

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×