How to start different elements on different keyframes of an animation in CSS


Tags: css,animation,keyframe

Problem :

If I have a CSS animation and I want to create various instances of that animation but start at different stages of the animation how can I specify that.

I imagined something like this, second webkit line is pseudo code:

 #cell1
  {
      width:100px;
      height:100px;

       -webkit-animation: pulse 35s infinite alternate;
       -webkit-animation: pulse start at 25%;
  }


Solution :

As I understand the spec, a negative value for animation-delay would do the trick:

http://www.w3.org/TR/css3-animations/#animation-delay

If the value for 'animation-delay' is a negative time offset then the animation will execute the moment it is applied, but will appear to have begun execution at the specified offset. That is, the animation will appear to begin part-way through its play cycle. In the case where an animation has implied starting values and a negative 'animation-delay', the starting values are taken from the moment the animation is applied.

EDIT: Indeed, this works with my chromium: http://jsfiddle.net/GvUzX/


    CSS Howto..

    How to conditionally load CSS

    How can i overwrite media queries defined in Bootstrap CSS

    How to add style/css to a simple jQuery accordion?

    How to switch between css with jquery

    How do I apply a style to all children of an elements

    How do you tell a browser, “if you need to wrap, wrap here first”?

    How do I let the DOM know about new elements created on the fly?

    How can I add a CSS class to a page with jquery?

    How to Make Radio Button Into CSS Button?

    How to set session variable in jquery/css?

    How to make a box with arrow in CSS?

    How to apply CSS background color to some text in a paragraph without spaces caused by line-height?

    How to centre a
    within several other
    s (using a mixture of w3.css and css)

    How specify two css classes: from property and conditional class

    How to align div blocks to be aligned in grid?

    How to optimize an image sequence in Chrome?

    How to vertically center text next to a radio button

    How to change CSS property before element is created?

    how to align a sidebar to the right with css?

    How to make infinite movement of a div?

    How to create a dropdown that is open by default and with custom scrollbars ( see pic from wireframes) in HTML [closed]

    How to interchange table cells using Pure CSS

    How can I add text to a jQuery slider control?

    CSS: How the backgrounds can extend the border and overlap?

    How to make a transparent overlay on image [duplicate]

    How to apply CSS to document.write()?

    CSS--how to detect screen aspect ratio and apply styling accordingly? [duplicate]

    How to position an element relative to the background image width

    How to ensure that columns are contained within a row

    How to center two pieces of text using CSS and Bootstrap?