Scribd
Upload
13 views7 pages

CSS Animation

The @keyframes rule in CSS is used to define animations by specifying a sequence of style changes over time. Animations can be defined using percentages or the keywords 'from' and 'to', with 0% indicating the start and 100% the end. It is important to define both 0% and 100% for better browser support, and the !important rule is ignored within keyframes.

Uploaded by

Abishek Raja
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views7 pages

CSS Animation

The @keyframes rule in CSS is used to define animations by specifying a sequence of style changes over time. Animations can be defined using percentages or the keywords 'from' and 'to', with 0% indicating the start and 100% the end. It is important to define both 0% and 100% for better browser support, and the !important rule is ignored within keyframes.

Uploaded by

Abishek Raja
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 7

CSS Animation(Key Frames)

CSS @keyframes Rule


Definition and Usage :
• The @keyframes rule specifies the animation code.

• The animation is created by gradually changing from one set of CSS


styles to another.

• During the animation, you can change the set of CSS styles many times.

• Specify when the style change will happen in percent, or with the
keywords "from" and "to", which is the same as 0% and 100%. 0% is the
beginning of the animation, 100% is when the animation is complete.
• Tip:
For best browser support, you should always define both the
0% and the 100% selectors.

• Note:
1.Use the animation properties to control the appearance of
the animation, and also to bind the animation to selectors.
2.The !important rule is ignored in a keyframe (See last
example on this page).
CSS Syntax :

@keyframes animationname {keyframes-selector {css-


styles;}}

Example :
Make an element move gradually 200px down:

@keyframes mymove {
from {top: 0px;}
to {top: 200px;}}
Change many CSS styles in one animation:

@keyframes mymove {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Many keyframe selectors with many CSS styles:

@keyframes mymove {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
Note: The !important rule is ignored in a keyframe:

@keyframes myexample {
from {top: 0px;}
50% {top: 100px !important;} /* ignored */
to {top: 200px;}
}

You might also like