Scribd
Upload
2 views

CSS_Animation_and_Keyframes

Uploaded by

yohanskefyalew594
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

CSS_Animation_and_Keyframes

Uploaded by

yohanskefyalew594
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

The @keyframes rule in CSS is used to define animations.

It specifies the keyframes or

intermediate steps in an animation,

detailing how an element's styles should change during the animation process. These keyframes

are then applied to an element using

the animation property.

Syntax of @keyframes

--------------------

@keyframes animation-name {

from {

/* Initial styles */

to {

/* Final styles */

/* Or using percentage for more control */

@keyframes animation-name {

0% {

/* Initial styles */

50% {

/* Midway styles */

100% {
/* Final styles */

How It Works

------------

1. Define the animation with @keyframes, specifying what happens at specific points (e.g., 0%,

50%, 100%).

2. Apply the animation to an element using the animation property.

Example: Simple Animation

-------------------------

/* Define the animation */

@keyframes slide {

from {

transform: translateX(0);

to {

transform: translateX(100px);

/* Apply the animation */

.element {

animation: slide 2s ease-in-out;

}
Keyframes with Multiple Steps

-----------------------------

You can define animations with multiple intermediate steps:

@keyframes bounce {

0% {

transform: translateY(0);

50% {

transform: translateY(-50px); /* Move up */

100% {

transform: translateY(0); /* Return to the start */

.element {

animation: bounce 1s infinite;

Properties of animation

-----------------------

When using @keyframes, you configure the animation with the following properties:

1. animation-name: Name of the animation defined by @keyframes.

2. animation-duration: How long the animation lasts (e.g., 2s, 500ms).

3. animation-timing-function: Speed curve (e.g., ease, linear, ease-in-out).


4. animation-delay: Start time delay (e.g., 1s).

5. animation-iteration-count: Number of times the animation repeats (e.g., infinite, 3).

6. animation-direction: Whether the animation reverses on alternate cycles (e.g., normal, reverse,

alternate).

7. animation-fill-mode: Styles applied before/after animation (e.g., forwards, backwards).

8. animation-play-state: Pauses or resumes the animation (running or paused).

Complete Example

----------------

@keyframes colorChange {

0% {

background-color: red;

50% {

background-color: yellow;

100% {

background-color: green;

.element {

animation: colorChange 3s infinite alternate;

In this example:

- The element changes colors from red to yellow to green.


- The animation repeats infinitely, alternating directions.

Summary

-------

- Use @keyframes to define how styles change at different points of the animation.

- Apply the animation to elements with the animation property.

- Combine with timing functions, delays, and iterations for complex animations.

You might also like