본문으로 건너뛰기

Advanced Animation Techniques

Advanced Animation Techniques

In this lesson, we will explore advanced properties of CSS animations.


animation-direction and animation-iteration-count

animation-direction sets the direction of the animation play. It allows you to make an HTML element rotate in one direction like a pinwheel or go back and forth repeatedly.

Example:
CSS
div {
animation-direction: alternate; /* The animation alternates directions */
animation-iteration-count: infinite; /* The animation repeats indefinitely */
}

The alternate value plays the animation forward first, then reverses it on the subsequent iteration. infinite makes the animation repeat endlessly.


Interactive Animation with Users

Combining :hover with Animations

:hover is used to define the style when the mouse is over an element. Combining this with animations can create dynamic webpages that respond to user interactions.

Example:
CSS
div:hover {
animation-name: multiMove;
animation-duration: 2s;
}

By doing this, the animation starts only when the user hovers the mouse over the div.