How do I chain an infinite css animation to a one-time css animation?


Tags: css,css3,css-animations

Problem :

I'm trying to animate an element rotating like someone starting a top. At first, the element would rotate counter-clockwise before transitioning to rotating clockwise infinitely.

The general CSS I have is here:

div {
    animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear infinite 800ms;
}

@-keyframes PreRotate {
    from { transform:rotate(0deg);}
    to { transform:rotate(-360deg);}
}

@-keyframes Rotate {
    from { transform:rotate(0deg);}
    to { transform:rotate(360deg);}
}

What I expect would happen is that the element would rotate counter clockwise for 800ms once (PreRotate animation) and then rotate clockwise infinitely after 800ms (Rotate animation). From the example http://jsfiddle.net/Fu5V2/6/ though, it seems like every clockwise rotation, the rotation 'hiccups'.

Could someone explain why this is happening and how the desired effect could be achieved? The independent animations seem right but chaining them together messes something up.



Solution :

I can't tell you exactly why this is happening, but apparently it's caused by the two animations overlapping at some point. If you delay the start of the second animation by something like 50ms, it plays fine:

div {
    display:inline-block;
    -webkit-animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear 850ms infinite;
    animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear 850ms infinite;
}

@-webkit-keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes PreRotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(-360deg);}
}

@keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@keyframes PreRotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(-360deg);}
}

JSFiddle


    CSS Howto..

    How to only use jquery .css() on a specific media query?

    Showing/hiding content with jQuery

    How to mark up speedometer/gauge in HTML/CSS?

    How to line up a label to the right of a styled checkbox

    How to do grid of div elements?

    Show div at mouse click position, accounting for scrolling

    How to convert bullet points into horizontal list?

    CSS: How can I hide a class which has no other class or ID?

    How to show only a portion of an image just by using the img tag?

    Can't figure out how to set color for specific div's in the loop

    css how to only make bold fonts for first
      set

    How to select list item by its contents?

    How to set keyboard focus to a representing parent element of a list

    How to call a javascript function with a css button? [closed]

    How to make a drop-right menu?

    How do I blur an element with scroll, until it's blurred to a certain point?

    How to wrap text inside an iframe with designMode on, using css and also javascript if necessary?

    How to reference this line in CSS, HTML

    How to hide elements with css using checkboxes: different outputs according to element id or class?

    How to change css style value using php in a for loop?

    How to make a slider with divs and variable width?

    How to have different alignments in one div(nav)?

    How to set different css attributes with JQuery?

    How to prevent Ajax long-poll from reloading div in Chrome?

    How to position one element relative another using CSS/jQuery

    Responsive CSS: Replicating how Facebook's chat panel disappears below a certain browser window width

    jQuery beginner: how to add css transition when using toggleClass(“open”)?

    How do i create custom grid class in Bootstrap for lg as well as xs screen size?

    How can have all the images show up on my slider whilst differentiating each image with its own div tag?

    nth-child's child is not shown