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.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>
1animation: name time func delay iteration dir fill play;
2animation: none 0s ease 0s 1 normal none running;
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;
1animation: name time func delay iteration dir fill play;
2It is a shorthand for
3animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.