The animation property is a shorthand property for all the other properties a CSS animation can be given.

The animation-delay property specifies a delay for the start of an animation defined in seconds (s) or milliseconds (ms).

The animation-direction property defines whether an animation should be played forwards, backwards, or in alternate cycles.

The animation-duration property defines how long, in seconds (s) or milliseconds (ms), an animation should take to complete one cycle.

The animation-fill-mode property specifies a style for the element when the animation is not playing – both before it starts and after it ends.

The animation-iteration-count property specifies the number of times an animation should play before stopping.

The animation-name property specifies a name for a @keyframes animation.

The animation-play-state property specifies whether the animation is running or paused, and JavaScript can be used to pause the animation in mid cycle.

The animation-timing-function defines the speed curve of an animation, which is the time it takes to change from one set of styles to another (how smooth).

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

The transition-delay property specifies when the transition effect will start, and is defined in seconds (s) or milliseconds (ms).

The transition-duration property specifies how long the transition effect will take to complete, and is defined in seconds (s) or milliseconds (ms).

The transition-property property specifies the name of the CSS property the transition effect will apply to.

The transition-timing-function property specifies the speed curve of the transition effect, allowing for the effect to change speed over its duration.