1animation: name time func delay iteration dir fill play;
2animation: none 0s ease 0s 1 normal none running;
3
4animation-name: none;
5animation-duration: 0s;
6animation-timing-function: ease;
7animation-delay: 0s;
8animation-iteration-count: 1;
9animation-direction: normal;
10animation-fill-mode: none;
11animation-play-state: running;
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
1animation-name: none;
2animation-duration: 0s;
3animation-timing-function: ease;
4animation-delay: 0s;
5animation-iteration-count: 1;
6animation-direction: normal;
7animation-fill-mode: none;
8animation-play-state: running;
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>