Описание тега css-animations

Описание тега Вопросы с тегом
CSS animations make it possible to animate transitions from one CSS style configuration to another. CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.

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: