1CSS animation properties template:
2{
3 animation-name: anima-name;
4 animation-duration: 1s;
5 animation-iteration-count: infinite;
6 animation-delay: 2s;
7 animation-direction: reverse | normal | alternate | alternate-reverse ;
8 animation-timing-function: ease | ease-out | ease-in | ease-in-out | linear | cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0));
9 animation-fill-mode:forwards | backwards | both | none;
10}
11@keyframes anima-name {
12 from {
13 background-position:right;
14 }
15 to {
16 background-position:left;
17 }
18}
19@keyframes anima-name {
20 0% {
21 background-color: red;
22 }
23 50% {
24 background-color: green;
25 }
26 100% {
27 background-color: red;
28 }
29}
30
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5div {
6 width: 100px;
7 height: 100px;
8 background-color: red;
9 position: relative;
10 animation: myfirst 5s linear 2s infinite alternate;
11}
12@keyframes myfirst {
13 0% {background-color:red; left:0px; top:0px;}
14 25% {background-color:yellow; left:200px; top:0px;}
15 50% {background-color:blue; left:200px; top:200px;}
16 75% {background-color:green; left:0px; top:200px;}
17 100% {background-color:red; left:0px; top:0px;}
18}
19</style>
20</head>
21<body>
22
23<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
24
25<div><p>you can add text in this box or anithing else like a pictrue</p></div>
26
27</body>
28</html>
1Read this helpful, short and straightforward article to learn CSS animation perfectly.
2
3https://medium.com/@Cafe_Code/learn-css-animation-asap-as-simple-as-possible-374b7874d4dd
1<style>
2
3 #ball {
4 width: 100px;
5 height: 100px;
6 margin: 50px auto;
7 position: relative;
8 border-radius: 50%;
9 background: linear-gradient(
10 35deg,
11 #ccffff,
12 #ffcccc
13 );
14 /*"Call" the animation "function" */
15 animation-name: bounce;
16 animation-duration: 1s;
17 animation-iteration-count: infinite;
18 animation-delay: 2s;
19 /* Normal, reverse, alternate(between the fwd and back)
20 and alternate-reverse */
21 animation-direction: reverse;
22 /* Ease is deafault, use cubic-bezier(n,n,n,n) for custom */
23 animation-timing-function: linear;
24
25 /* if you want something to display from hidden
26 set the opacity to 0 and in the keyframe steps bring
27 the opacity to 1 gradually to stop it flashing */
28 }
29
30 /* The animation "bounce" */
31 @keyframes bounce{
32 /* start */
33 0% {
34 top: 0px;
35 }
36 /* step (you can add multiple incremental steps from 1-100) */
37 50% {
38 top: 249px;
39 width: 130px;
40 height: 90px;
41 }
42 /* end (you can count down from 100 to 0 too) */
43 100% {
44 top: 0px;
45 }
46 }
47</style>
48
49<div id="ball"></div>
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5div {
6 width: 100px;
7 height: 100px;
8 background-color: red;
9 position: relative;
10 animation: myfirst 5s linear 2s infinite alternate;
11}
12@keyframes myfirst {
13 0% {background-color:red; left:0px; top:0px;}
14 25% {background-color:yellow; left:200px; top:0px;}
15 50% {background-color:blue; left:200px; top:200px;}
16 75% {background-color:green; left:0px; top:200px;}
17 100% {background-color:red; left:0px; top:0px;}
18}
19</style>
20</head>
21<body>
22
23<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
24
25<div><p>you can add text in this box or anithing else like a pictrue</p></div>
26
27</body>
1@-webkit-keyframes pulse {
2 0% {
3 background-color: red;
4 opacity: 1.0;
5 -webkit-transform: scale(1.0) rotate(0deg);
6 }
7 33% {
8 background-color: blue;
9 opacity: 0.75;
10 -webkit-transform: scale(1.1) rotate(-5deg);
11 }
12 67% {
13 background-color: green;
14 opacity: 0.5;
15 -webkit-transform: scale(1.1) rotate(5deg);
16 }
17 100% {
18 background-color: red;
19 opacity: 1.0;
20 -webkit-transform: scale(1.0) rotate(0deg);
21 }
22}
23
24.pulsedbox {
25 -webkit-animation-name: pulse;
26 -webkit-animation-duration: 4s;
27 -webkit-animation-direction: alternate;
28 -webkit-animation-timing-function: ease-in-out;
29}
30