Basic CSS Animation Options

animation-name:

Specifies the name of the @keyframes animation.

animation-duration:

Defines how long the animation takes to complete one cycle.

animation-timing-function:

Describes how the animation progresses through the duration of each cycle (e.g., ease, linear, ease-in, ease-out).

animation-delay:

Sets a delay before the animation starts.

animation-iteration-count:

Specifies the number of times the animation should repeat.

animation-direction:

Defines whether the animation should play in reverse on alternate cycles (e.g., normal, reverse, alternate).

@keyframes:

Used to define the animation. It specifies the keyframes (or waypoints) along the animation sequence.

transform:

Applies a 2D or 3D transformation to an element. In this example, transform: translateY(-150px); moves the element 150 pixels up along the Y-axis.