animation简写顺序

Oct 3, 2019

简写顺序如下:
animation: name duration timing-function delay iteration-count direction fill-mode play-state

实例(div.tri的最后一行):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
div.tri {
width: 600px;
height: 600px;
margin: 0 atuo;
background-color: #ebb0e8;
background-size: 100px 100px;
background-image: linear-gradient(
to right top,
#abcdef 25%,
transparent 25%
),
linear-gradient(to left top, #abcdef 25%, transparent 25%),
linear-gradient(to right bottom, #abcdef 25%, transparent 25%),
linear-gradient(to right top, transparent 75%, #abcdef 75%);

animation: rotate 3s ease-in-out 2s infinite alternate backwards running;
}
@keyframes rotate {
from {
transform: rotate3d(1, 1, 1, 45deg) translateX(250px) scale(0.5)
skew(12deg);
}
to {
transform: rotate3d(1, 1, 1, 45deg) translateX(250px) scale(1)
skew(45deg);
}
}