CSS3 Animations

Animation Chapter File examples

  • Page 55:
    Rainbow
    Animating through various colors, starting with black and ending with
    white

Setting Up Your Keyframe Animation

The animation-name and animation-duration properties

The animation-iteration property

  • Page 68:
    float value
    Try changing the value of the animation-iteration-count. You’ll note the 0.25 value will make the animation iterate less than one full cycle.
  • Page 68:
    .flag animation
  • Page 70:
    ball animation
  • Page 72:

    partial animation animation

The animation-delay property

The animation-timing-function, including Cubic Bezier curves

The animation-play-state property

The animation-fill-mode property

  • Page 103: Snowflake. Stop & Start animation
  • Page 104: Specificity of animations
  • Page 104: !important is ignored in an animation @keyframes rule
  • Page 105: Animation Order
    Last animation running takes precedence
    Last animation declared with forwards takes precendce
  • Page 105: Snowflake. Stop & Start animation
  • animation_iteration-count with no animation-duration
  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>