back css animation code example
Example 1: animation css
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div><p>you can add text in this box or anithing else like a pictrue</p></div>
</body>
</html>
Example 2: animation-direction property
animation-direction can have the following values -
(1) normal : forward direction, this is the default value.
(2) reverse : the animation sets in the reverse direction ( backward ).
(3) alternate : the animation plays normal first and then reverse.
(4) alternate-reverse: the animation plays reverse first and then normal.
NOTE: animation-duration also matters in animation-direction.
Example 3: css move animation
article {
animation-name : displaceContent;
animation-duration : 1s;
animation-delay : 4s;
animation-iteration-count : 1;
animation-fill-mode : forwards;
}
@keyframes displaceContent {
from { transform : translateY(0em) }
to { transform : translateY(3em) }
}
Example 4: learn css animation
Read this helpful, short and straightforward article to learn CSS animation perfectly.
https://medium.com/@Cafe_Code/learn-css-animation-asap-as-simple-as-possible-374b7874d4dd