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

• Page 57:
  Weird animation names work
• Page 57:
  Keyword as Animation name
• Page 58:
  The W animation
  The W @keyframes animation, when attached to an absolutely positioned element, moves that element along a W-shaped path. W has five keyframes, at the 0%, 25%, 50%, 75%, and 100% marks. The from is the 0% mark. The to is the 100% mark.
• Page 59:
  No 0% or 100% keyframes
  If a 0% or from keyframe is not specified, the browser constructs a 0% keyframe using the original values of the properties being animated, as if the 0% keyframe were declared with the same property values that impact the element when no animation was applied. Same thing happens for the 100% or to keyframe if not defined.
• Page 60:
  The W animation revisited
  Repeating keyframe properties is allowed now.
• Page 61:
  no mid point - auto doesn't animate well
  MDN's list of Animatable Properties
• Page 62:
  Setting/omitting initial values and 0%
  Your initial values matter. Observe the 6th example.
• Page 63:
  Animation API
  Dynamically Changing @keyframes.

The animation-name and animation-duration properties

• Page 64:
  Unfortunate Animation name
• Page 65 & 67:
  extra animation name of an animation you can add later.
• Page 65:
  Last animation takes precedence
• Page 67:
  animation-duration with invalid value

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

• Page 72:
  ball animation with a negative delay
• Page 74:
  animation events
  animation events with negative delay
• Page 75:
  Animation Chaining
• Page 76:
  Animation after animation
• Page 78:
  Animation Chaining with JS
• Page 81:
  animation iteration delay
  animation-iteration delay within the @keyframe
  animation-iteration delay within the @keyframe
  animation-iteration delay within the @keyframe

The animation-timing-function, including Cubic Bezier curves

• Page 84:
  cubic-bezier.com(.17,.67,.83,.67)
• cubic bezier
• cubic bezier – visual representation
• cubic bezier – visual representation 2
• cubic bezier – visual representation 3
• cubic bezier – visual representation 4
• Bouncing Ball
• steps timing function - dancer
• steps timing function - dancer moving around
• Animating the timing function
• Page 92: Changing the timing function mid animation
• Page 95: Changing timing on bouncing ball

The animation-play-state property

• Stop the ball by hovering over it.

The animation-fill-mode property

• Page 98: Partial iteration with fill mode
• Page 99: Partial iteration with fill-mode
• Page 99: No duration, but animation still happens

Page 102: Snowflake. Stop & Start animation

Page 103: Specificity of animations

Page 103: !important is ignored in an animation @keyframes rule

Page 104: Animation Order
running animations take precedence
last animation declared takes precendce
Snowflake. Stop & Start animation

animation_iteration-count with no animation-duration