CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

CSS @keyframes rule

CSS @keyframes rule

It describes the rule of animation that depicts the properties of CSS for the components at every state along with the timeline.

We may make the properties of complex animation with the use of the @keyframe. The animation can be made with the varying styles of CSS that are repeated endlessly or the time’s finite number. A general animation may contain two keyframes, although a complex animation contains various keyframes.

Syntax:

@keyframes animation-name {keyframes-selector {css-styles;}}  

To use the keyframes, we must create the @keyframe rule with the property animation-name to match the animation along with their keyframe declaration.

This property of CSS accepts the three values, which are discussed in detail, as given below:

Property Values

animation-name: This value is a required value, and it represents the animation name.

keyframes-selector: This value describes the percentage with an animation when any keyframe occurs. It has values that lie among 0%-100%, from (similarly as 0%), to (similarly as 100%). The percentage o keyframe can be defined in order because this percentage will be controlled in that order in which they occur.

css-styles:  This property value represents one or above than one property of CSS style.

If any keyframe rules do not define the end and start animation states, then any browser will apply the actual component’s styles. The properties can be ignored that will not be animated inside the keyframe rules.

Timing function of keyframes

To control the rule of animation, we may apply the values discussed as follows:

linear: It specifies the rate of the transition perceptual from start edge to end edge.

ease: It stipulates that animation will start gradually, and after a period of time, the speed will increase, and the speed of before end will slow down again.

ease-in: This function is the same as ease function, although an animation will end quickly.

ease-out: This function is also the same as the ease function, although an animation will start fast.

Let’s understand the @keyframe rule of CSS, along with the following examples.

Example:1

<!DOCTYPE html> 
<html> 
<head> 
<style>  
div 
{ 
width:200px; 
height:200px; 
animation:demo 5s ease-in infinite, trans 5s ease-in-out infinite; 
border-radius:40px; 
} 
@keyframes demo 
{ 
0% {background:orange;} 
50% {background:lime; width:100px; height:100px;} 
100% {background:blue; width:300px; height:300px;} 
} 
@keyframes trans 
{ 
0% {transform:translate(0px) scale(1.4) rotate(80deg);} 
50% {transform:translate(250px) scale(1.2) rotate(40deg);} 
100% {transform:translate(350px) scale(1) rotate(0deg);} 
} 
</style> 
</head> 
<body> 
<div></div> 
<p> The element back off to its real State, after the finalization of an Animation </p> 
</body> 
</html> 

Output:

CSS @keyframes rule

Example:2

<!DOCTYPE html>  
<html>  
<head>  
<style>   
h1
{  
color: black;  
text-align: center;  
}  
div
{  
position: relative;  
animation: exp 7s infinite;  
}  
@keyframes exp
{  
0%
{  
top: 500px;   
width: 0px; 
font-size:10px; 
transform: translate(0px) scale(1.4) rotate(80deg); 
}  
25%
{  
top: 400px;   
background: lime;   
font-size:20px; 
width: 50px;  
transform: translate(100px) scale(1.3) rotate(60deg); 
}  
50%
{  
top: 300px;   
background: tomato; 
font-size:30px; 
width: 150px;  
transform: translate(200px) scale(1.2) rotate(40deg); 
}  
75%
{  
top: 200px;   
background: violet;   
width: 250px;  
font-size:40px; 
transform: translate(300px) scale(1.1) rotate(20deg); 
}  
100%
{  
top: 100px;   
background: blue; 
font-size:50px; 
width: 500px;            
transform: translate(400px) scale(1) rotate(0deg); 
}  
}  
</style>  
</head>  
<body>  
<div>  
<h1> Tutorial and Example </h1>  
</div>  
</body>  
</html>  

Output:

CSS @keyframes rule

Key Points:

There are some key points about the rule are discussed below:

  • We may apply from keyword rather than the use of 0%.
  • We may refer to the keyword rather than the use of 100%.
  • Even when we use from and to keywords, the values among them will be declared within 0%.
  • To a valid animation, the starting time and ending time should be declared.
  • These declarations will get avoided that concerns the !important.



ADVERTISEMENT
ADVERTISEMENT