본문으로 건너뛰기

Animation Basics

Animation Basics

Animations make web pages dynamic and engaging. When elements move and change on the screen, it feels as though the page is 'communicating' with the user.


Basic Structure of CSS Animations

  • Understanding @keyframes @keyframes defines how an animation should progress. Similar to how a story unfolds page by page in a comic book, you define how an element should transform at each 'page' (keyframe).

  • Start and End of an Animation An animation has a beginning and an end. In the above example, 0% represents the start, and 100% represents the end. CSS animations specify how HTML elements should change between these points.

Example

CSS
@keyframes bounce {
0% {
transform: translateY(0); /* At 0%, apply translateY(0) */
}
50% {
transform: translateY(-20px); /* At 50%, apply translateY(-20px) */
}
100% {
transform: translateY(0); /* At 100%, apply translateY(0) */
}
}

Here, a "bounce" animation is created to make an HTML element move up and then come back down.


Creating Simple Animations

Using animation-name and animation-duration

To apply an animation, you need to specify what (animation-name) and how long (animation-duration) it should run.

Example:

CSS
div {
animation-name: bounce;
animation-duration: 2s; /* Run the animation for 2 seconds */
}

By doing this, the div element will perform the "bounce" animation over 2 seconds.


Controlling Animation Effects

Adjusting Speed with animation-timing-function

You can decide how the animation speed changes over time. Using animation-timing-function, you can make the animation start slow, become faster in the middle, and then slow down again at the end.

Example:
CSS
div {
/* ease-in-out starts the animation slowly, speeds up in the middle, and then ends slowly. */
animation-timing-function: ease-in-out;
}

By doing this, the div element will start slowly, speed up in the middle, and then slow down again towards the end.


Delaying an Animation with animation-delay

When you want to delay an animation, use animation-delay.

Example:
CSS
div {
animation-delay: 1s; /* Start the animation after a 1-second delay */
}

Follow the asterisk-highlighted part of the code to try inputting it.