Table of Contents
Basic Declaration & Usage
Example:-
div {
width: 80px;
height:80px;
border-radius: 50px;
background: blue;
position: relative;
animation: mymove 5s infinite;
}@keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}<!DOCTYPE html>
<html>
<head>
<title>@keyframes</title>
</head>
<style>
div {
width: 80px;
height:80px;
border-radius: 50px;
background: blue;
position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
<body>
<h1>Basic Declaration & Usage</h1>
<p><strong>we learn with myprograming</strong> </p>
<div></div>
</body>
</html>Output:-
For the sake of brevity The Remainder of the code on this page Won’t use any prefixes, However globe usage Ought to use all The Seller prefixes from On Top Of…
Multiple steps
Example:-
@keyframes NAME-YOUR-ANIMATION{
0% {
width: 0px;
}
30% {
width: 50%;
}
100% {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<title>@keyframes</title>
</head>
<style>
div {
width: 80px;
height:80px;
background: blue;
position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {
width: 0px;
}
30% {
width: 50%;
}
100% {
width: 100%;
}
}
</style>
<body>
<h1>Multiple steps </h1>
<p><strong>we learn with myprograming</strong> </p>
<div></div>
</body>
</html>Output:-
If associate degree animation has a constant beginning and ending properties, a way to try and do that’s to comma-separate the 1/3 and 100 percent values:
Or, you may continuously tell the animation to run doubly (or any even range of times) and tell the direction to alternate.
@keyframes mymove {
0%, 100% {
width: 0px;
}
50% {
width: 100px;
}
}Calling Keyframe Animation with Separate Properties
Example:-
div {
width: 80px;
height:80px;
background: blue;
position: relative;
animation-name: mymove;
animation-duration: 4s; /* or: Xms */
animation-iteration-count: 10;
animation-direction: alternate; /* or: normal */
animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
animation-fill-mode: forwards; /* or: backwards, both, none */
animation-delay: 2s; /* or: Xms */
}
@keyframes mymove {
0% {
width: 0px;
}
100% {
width: 100%;
}
}Output:-
Animation Shorthand
Just space-separate all the individual values. The order doesn’t matter except once exploitation each period and delay, they have to be there in order. within the example below 1s = period, 2s = delay, three = iterations.
Example:-
animation: mymove 1s 2s 3 alternate backwards;<!DOCTYPE html>
<html>
<head>
<title>@keyframes</title>
</head>
<style>
div {
width: 80px;
height:80px;
background: blue;
position: relative;
animation: mymove 1s 2s 3 alternate backwards;
}
@keyframes mymove {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
</style>
<body>
<h1>Animation Shorthand</h1>
<p><strong>we learn with myprograming</strong> </p>
<div></div>
</body>
</html>Output:-
Combine Transform and Animation.
Example:-
@keyframes mymove {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}<!DOCTYPE html>
<html>
<head>
<title>@keyframes</title>
</head>
<style>
div {
width: 80px;
height:80px;
background: blue;
position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<body>
<h1>Combine transform and animation</h1>
<p><strong>we learn with myprograming</strong> </p>
<div></div>
</body>
</html>Output:-
Sub-Properties
animation-name:- declares the name of the @keyframes at-rule to govern.
animation-duration:- the length of your time it takes for AN animation to complete one cycle.
animation-timing-function:- establishes predetermined acceleration curves like ease or linear.
animation-delay:- the time between the part being loaded and therefore the beginning of the animation sequence (cool examples).
animation-direction:- sets the direction of the animation once the cycle. Its default resets on every cycle.
animation-iteration-count:- the number of times the animation ought to be performed.
animation-fill-mode:- sets that value is applied before/after the animation.
For example, you’ll set the last state of the animation to stay on screen, otherwise, you will set it to modify back to before once the animation began.
animation-play-state: pause/play the animation.
