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;
1<style>
2@keyframes animatename{
3 0%{
4 transform: translateY(3px);
5 }
6 100%{
7 transform: translateY(-3px);
8 }
9}
10.my-div{
11 animation: animatename 1s linear infinite;
12 /* animation shorthand */
13 animation: animation-name animation-duration animation-direction animation-iteration-count
14}
15</style>
1<style>
2.my-element {
3 width: 100%;
4 height: 100%;
5 animation: tween-color 5s infinite;
6}
7
8@keyframes tween-color {
9 0% {
10 background-color: red;
11 }
12 50% {
13 background-color: green;
14 }
15 100% {
16 background-color: red;
17 }
18}
19
20html,
21body {
22 height: 100%;
23}
24<style>
25
26<body>
27 <div class="my-element"></div>
28</body>
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