CSS @keyframes Rule

G3tf0ck3d · Feb 26, 2025

What is a @keyframes in CSS3?
The @keyframes rule is used to create animations. In general, an animation in CSS3 is defined as changing from one CSS style to another.

Structure:
@keyframes name { selector { styles ; } }

Property Values:
name – it’s specifies the name of the animation. (required)
selector – it’s specifies that percentage of the animation duration.(required)
Possible Value:
0 – 100%
from (same as 0%)
to (same as 100%)

styles - it’s specifies one or more CSS style properties.(required)
Example:
In this example you can see on how to use @keyframes rule to animate the position of a box.

CSS Source Code

<style type=

"text/css"

>
div.animate

{
width

:

50px

;
height

:

50px

;
color

:

white

;
padding

:

2px

;
background

:

blue

;
position

:

relative

;
}
#test1

{
animation-name

:

boxmove;
animation-duration

:

5s

;
animation-iteration-count

:

infinite

;
/* Firefox */
-moz-animation-name:

boxmove;
-moz-animation-duration:

5s

;
-moz-animation-iteration-count:

infinite

;
/* Safari and Google Chrome */
-webkit-animation-name:

boxmove;
-webkit-animation-duration:

5s

;
-webkit-animation-iteration-count:

infinite

;
}
@keyframes

boxmove
{
from {

left

:

0px

;

}
to {

left

:

210px

;

}
}
@-moz-keyframes

boxmove /* Firefox */
{
from {

left

:

0px

;

}
to {

left

:

210px

;

}
}
@-webkit-keyframes

boxmove /* Safari and Google Chrome */
{
from {

left

:

0px

;

}
to {

left

:

210px

;

}
}
</style>

Full Source Code

<!DOCTYPE html>
<html

>
<head

>
<style

type

=

"text/css"

>
div.animate {
width: 50px;
height: 50px;
color: white;
padding: 2px;
background: blue;
position: relative;
}
#test1 {
animation-name: boxmove;
animation-duration: 5s;
animation-iteration-count: infinite;
/* Firefox */
-moz-animation-name: boxmove;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
/* Safari and Google Chrome */
-webkit-animation-name: boxmove;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
}
@keyframes boxmove
{
from {left: 0px;}
to {left: 210px;}
}
@-moz-keyframes boxmove /* Firefox */
{
from {left: 0px;}
to {left: 210px;}
}
@-webkit-keyframes boxmove /* Safari and Google Chrome */
{
from {left: 0px;}
to {left: 210px;}
}
</

style

>
</

head

>
<body

>
<div

id

=

"test1"

class

=

"animate"

>

linear</

div

>
</

body

>
</

html

>

This is the result of the code above:

Hope that this tutorial will help you a lot.

So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.

2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Download

You must upgrade your account or reply in the thread to view the hidden content.

CSS @keyframes Rule

More options

G3tf0ck3d

452,513

356,536

356,563