@keyframes#

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

Implementation on platform#

Both Android and iOS use keyframes to animate, the difference is that the property changes caused by Android animation will actually act on the View, while the transform part of iOS is implemented using CATransform3D.

When properties are left out of some keyframes#

Properties that aren't specified in every keyframe are interpolated if possible — properties that can't be interpolated are dropped from the animation. For example:

@keyframes identifier {
  0% {
    background-color: blue;
    opacity: 0;
  }
  30% {
    opacity: 0.3;
  }
  72% {
    background-color: yellow;
  }
  100% {
    opacity: 1;
    background-color: red;
  }
}

Keyframe value#

• from A starting offset of 0%.

• to An ending offset of 100%.

• <percentage> A percentage of the time through the animation sequence at which the specified keyframe should occur.

Supported properties#

The keyframes animation supports the left, right, top, bottom, width, height, opacity, background-color, color, transform, max-width, min-width, max-height, min-height, padding-left, padding-right, padding-top, padding-bottom, margin-left, margin-right, margin-top, margin-bottom, border-left-width, border-right-width, border-top-width, border-bottom-width, border-left-color, border-right-color, border-top-color, border-bottom-color, flex-basis, flex-grow, filter.