This resource is dedicated to creating CSS animations: CSS Animation Tutorial

Brackets editor

cubic-bezier

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, transition-delay, and transition-behavior.

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.

The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.

The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.

The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.

animation: name duration timing-function delay iteration-count direction fill-mode play-state;