Watch vide presentation for better understanding and subscribe for more;
Elements Used In Animations
- @keyframes– this element is where you specify the styles of your object, for instance the color, font-size, background-color, font-family among others, it is actually followed by the animation name such as @keyframes myanimation
- Animation name– in this case you just refer your unique name for the class division or id division you want to apply the animation, you may name it as myanimation
- Animation duration -in this case you specifies how long the animation should take for instance you say 1s, 4s, 20s and so on. If you do not include this element it no animation will happen as it indicates 0s for the animation.
We may have an example here for better understanding;
<head>
<title>Example of an animation</title>
<style>
@keyframes myanimation{
from{background-color: green;}
to{background-color: Red;}
}
.cssanimation{
width: auto;
height: 40px;
text-align: center;
font-size: 30px;
font-weight: bold;
background-color: green;
animation-name: myanimation;
animation-duration: 5s;
}
</style>
</head>
<body>
<div class="cssanimation">
This is just an example
</div>
</body>It will show this;
This is just an example
- animation-delay– in this case you indicate how long should the iteration delay before the changes happen, for instance if you indicate 3s it means the background-color will delay for 3s before changing to a different color, if not included the animation delay is set to the default value which is 1s.
- animation-iteration-count– this is very vital as it shows how many time should the animation go. For instance you indicate 4, so it means it will happen for times then it stops but if you want it to happen all through then you set to infinite. If this element is not indicated then the animation happens once after you refresh your browser.
Let’s have an example to indicate those;
<head>
<title>Example of an animation</title>
<style>
@keyframes myanimation{
from{background-color: green;}
to{background-color: Red;}
}
.cssanimation{
width: auto;
height: 40px;
text-align: center;
font-size: 30px;
font-weight: bold;
background-color: green;
animation-name: myanimation;
animation-duration: 5s;
animation-delay: 3s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div class="cssanimation">
This is just an example
</div>
</body>It will show this;
This is just an example
- animation-direction– this will indicate the direction to which the object should move. For instance, you may indicate the object to move to the left, to the right, top or bottom with specifications of how far should it be from the indicated position in pixels, cm or pc. You may indicate the object to move forwards, backwards or alternate If not indicated then the object will be fixed in the webpage. Lets have an example here;
<head>
<title>Example of an animation</title>
<style>
@keyframes myanimation{
from{background-color: green; right: 100px; bottom: 10px;}
to{background-color: Red; left: 100px; top: 1oopx;}
}
.cssanimation{
width: auto;
height: 40px;
text-align: center;
font-size: 30px;
font-weight: bold;
position: relative;
background-color: green;
animation-name: myanimation;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
</head>
<body>
<div class="cssanimation">
This is just an example
</div>
</body>See the result here;
This is just an example
- animation-timing-function– this case you specifies the speed with which the animation curve should move with, you may set it to ease, linear, ease-in, ease-out or ease-in-out according to your wish, for instance if you set ease it will have a slow start then it moves faster, ease-in-out shows it will have a slow start and also end with a slow move. You may try using the example above and see the results.