Questions tagged [css-animations]

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

Properties

• animation-delay

• animation-direction

• animation-duration

• animation-iteration-count

• animation-name

• animation-play-state

• animation-timing-function

• animation-fill-mode

Animations are similar to css-transitions in that they change the presentational value of CSS properties over time. The principal difference is that while transitions trigger implicitly when property values change, animations are explicitly executed when the animation properties are applied.

Example

p {
  animation-duration: 3s;
  animation-name: slidein;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

References

• W3C CSS Animations Specification
• MDN Documentation
• Browser compatibility
• List of Animatable Properties - MDN