设置css3动画的顺序,CSS3 “瓷砖”顺序飘落的动画
CSS
語言：
CSSSCSS
確定
body {
background: #555;
}
div,
:before,
:after {
position: absolute;
}
.scene {
top: 50%;
left: 50%;
width: 39em;
height: 24em;
transform: translate(-50%, -50%);
box-shadow: 0 0 3px #000, 1px 1px 1px #000;
overflow: hidden;
}
.scene:before {
width: 117em;
height: inherit;
background: linear-gradient(90deg, #fec864 39em, #c1c451 0, #c1c451 78em, #d25831 0);
animation: shift 24s steps(1) infinite;
content: '';
}
@keyframes shift {
33.33333% {
transform: translate(-39em);
}
66.66667% {
transform: translate(-78em);
}
}
.tile {
width: 3em;
height: 3em;
box-shadow: 0 0 1px currentColor;
background: currentColor;
color: #fec864;
animation: a 8s ease-in-out infinite;
}
.tile:nth-child(1) {
margin: 21em 0em;
animation-name: a1;
}
@keyframes a1 {
0%, 0% {
transform: none;
}
33.97436%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(2) {
margin: 21em 3em;
animation-name: a2;
}
@keyframes a2 {
0%, 0.64103% {
transform: none;
}
34.61538%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(3) {
margin: 21em 6em;
animation-name: a3;
}
@keyframes a3 {
0%, 1.28205% {
transform: none;
}
35.25641%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(4) {
margin: 21em 9em;
animation-name: a4;
}
@keyframes a4 {
0%, 1.92308% {
transform: none;
}
35.89744%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(5) {
margin: 21em 12em;
animation-name: a5;
}
@keyframes a5 {
0%, 2.5641% {
transform: none;
}
36.53846%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(6) {
margin: 21em 15em;
animation-name: a6;
}
@keyframes a6 {
0%, 3.20513% {
transform: none;
}
37.17949%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(7) {
margin: 21em 18em;
animation-name: a7;
}
@keyframes a7 {
0%, 3.84615% {
transform: none;
}
37.82051%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(8) {
margin: 21em 21em;
animation-name: a8;
}
@keyframes a8 {
0%, 4.48718% {
transform: none;
}
38.46154%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(9) {
margin: 21em 24em;
animation-name: a9;
}
@keyframes a9 {
0%, 5.12821% {
transform: none;
}
39.10256%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(10) {
margin: 21em 27em;
animation-name: a10;
}
@keyframes a10 {
0%, 5.76923% {
transform: none;
}
39.74359%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(11) {
margin: 21em 30em;
animation-name: a11;
}
@keyframes a11 {
0%, 6.41026% {
transform: none;
}
40.38462%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(12) {
margin: 21em 33em;
animation-name: a12;
}
@keyframes a12 {
0%, 7.05128% {
transform: none;
}
41.02564%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(13) {
margin: 21em 36em;
animation-name: a13;
}
@keyframes a13 {
0%, 7.69231% {
transform: none;
}
41.66667%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(14) {
margin: 18em 0em;
animation-name: a14;
}
@keyframes a14 {
0%, 8.33333% {
transform: none;
}
42.30769%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(15) {
margin: 18em 3em;
animation-name: a15;
}
@keyframes a15 {
0%, 8.97436% {
transform: none;
}
42.94872%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(16) {
margin: 18em 6em;
animation-name: a16;
}
@keyframes a16 {
0%, 9.61538% {
transform: none;
}
43.58974%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(17) {
margin: 18em 9em;
animation-name: a17;
}
@keyframes a17 {
0%, 10.25641% {
transform: none;
}
44.23077%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(18) {
margin: 18em 12em;
animation-name: a18;
}
@keyframes a18 {
0%, 10.89744% {
transform: none;
}
44.87179%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(19) {
margin: 18em 15em;
animation-name: a19;
}
@keyframes a19 {
0%, 11.53846% {
transform: none;
}
45.51282%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(20) {
margin: 18em 18em;
animation-name: a20;
}
@keyframes a20 {
0%, 12.17949% {
transform: none;
}
46.15385%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(21) {
margin: 18em 21em;
animation-name: a21;
}
@keyframes a21 {
0%, 12.82051% {
transform: none;
}
46.79487%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(22) {
margin: 18em 24em;
animation-name: a22;
}
@keyframes a22 {
0%, 13.46154% {
transform: none;
}
47.4359%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(23) {
margin: 18em 27em;
animation-name: a23;
}
@keyframes a23 {
0%, 14.10256% {
transform: none;
}
48.07692%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(24) {
margin: 18em 30em;
animation-name: a24;
}
@keyframes a24 {
0%, 14.74359% {
transform: none;
}
48.71795%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(25) {
margin: 18em 33em;
animation-name: a25;
}
@keyframes a25 {
0%, 15.38462% {
transform: none;
}
49.35897%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(26) {
margin: 18em 36em;
animation-name: a26;
}
@keyframes a26 {
0%, 16.02564% {
transform: none;
}
50%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(27) {
margin: 15em 0em;
animation-name: a27;
}
@keyframes a27 {
0%, 16.66667% {
transform: none;
}
50.64103%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(28) {
margin: 15em 3em;
animation-name: a28;
}
@keyframes a28 {
0%, 17.30769% {
transform: none;
}
51.28205%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(29) {
margin: 15em 6em;
animation-name: a29;
}
@keyframes a29 {
0%, 17.94872% {
transform: none;
}
51.92308%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(30) {
margin: 15em 9em;
animation-name: a30;
}
@keyframes a30 {
0%, 18.58974% {
transform: none;
}
52.5641%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(31) {
margin: 15em 12em;
animation-name: a31;
}
@keyframes a31 {
0%, 19.23077% {
transform: none;
}
53.20513%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(32) {
margin: 15em 15em;
animation-name: a32;
}
@keyframes a32 {
0%, 19.87179% {
transform: none;
}
53.84615%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(33) {
margin: 15em 18em;
animation-name: a33;
}
@keyframes a33 {
0%, 20.51282% {
transform: none;
}
54.48718%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(34) {
margin: 15em 21em;
animation-name: a34;
}
@keyframes a34 {
0%, 21.15385% {
transform: none;
}
55.12821%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(35) {
margin: 15em 24em;
animation-name: a35;
}
@keyframes a35 {
0%, 21.79487% {
transform: none;
}
55.76923%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(36) {
margin: 15em 27em;
animation-name: a36;
}
@keyframes a36 {
0%, 22.4359% {
transform: none;
}
56.41026%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(37) {
margin: 15em 30em;
animation-name: a37;
}
@keyframes a37 {
0%, 23.07692% {
transform: none;
}
57.05128%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(38) {
margin: 15em 33em;
animation-name: a38;
}
@keyframes a38 {
0%, 23.71795% {
transform: none;
}
57.69231%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(39) {
margin: 15em 36em;
animation-name: a39;
}
@keyframes a39 {
0%, 24.35897% {
transform: none;
}
58.33333%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(40) {
margin: 12em 0em;
animation-name: a40;
}
@keyframes a40 {
0%, 25% {
transform: none;
}
58.97436%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(41) {
margin: 12em 3em;
animation-name: a41;
}
@keyframes a41 {
0%, 25.64103% {
transform: none;
}
59.61538%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(42) {
margin: 12em 6em;
animation-name: a42;
}
@keyframes a42 {
0%, 26.28205% {
transform: none;
}
60.25641%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(43) {
margin: 12em 9em;
animation-name: a43;
}
@keyframes a43 {
0%, 26.92308% {
transform: none;
}
60.89744%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(44) {
margin: 12em 12em;
animation-name: a44;
}
@keyframes a44 {
0%, 27.5641% {
transform: none;
}
61.53846%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(45) {
margin: 12em 15em;
animation-name: a45;
}
@keyframes a45 {
0%, 28.20513% {
transform: none;
}
62.17949%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(46) {
margin: 12em 18em;
animation-name: a46;
}
@keyframes a46 {
0%, 28.84615% {
transform: none;
}
62.82051%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(47) {
margin: 12em 21em;
animation-name: a47;
}
@keyframes a47 {
0%, 29.48718% {
transform: none;
}
63.46154%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(48) {
margin: 12em 24em;
animation-name: a48;
}
@keyframes a48 {
0%, 30.12821% {
transform: none;
}
64.10256%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(49) {
margin: 12em 27em;
animation-name: a49;
}
@keyframes a49 {
0%, 30.76923% {
transform: none;
}
64.74359%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(50) {
margin: 12em 30em;
animation-name: a50;
}
@keyframes a50 {
0%, 31.41026% {
transform: none;
}
65.38462%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(51) {
margin: 12em 33em;
animation-name: a51;
}
@keyframes a51 {
0%, 32.05128% {
transform: none;
}
66.02564%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(52) {
margin: 12em 36em;
animation-name: a52;
}
@keyframes a52 {
0%, 32.69231% {
transform: none;
}
66.66667%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(53) {
margin: 9em 0em;
animation-name: a53;
}
@keyframes a53 {
0%, 33.33333% {
transform: none;
}
67.30769%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(54) {
margin: 9em 3em;
animation-name: a54;
}
@keyframes a54 {
0%, 33.97436% {
transform: none;
}
67.94872%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(55) {
margin: 9em 6em;
animation-name: a55;
}
@keyframes a55 {
0%, 34.61538% {
transform: none;
}
68.58974%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(56) {
margin: 9em 9em;
animation-name: a56;
}
@keyframes a56 {
0%, 35.25641% {
transform: none;
}
69.23077%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(57) {
margin: 9em 12em;
animation-name: a57;
}
@keyframes a57 {
0%, 35.89744% {
transform: none;
}
69.87179%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(58) {
margin: 9em 15em;
animation-name: a58;
}
@keyframes a58 {
0%, 36.53846% {
transform: none;
}
70.51282%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(59) {
margin: 9em 18em;
animation-name: a59;
}
@keyframes a59 {
0%, 37.17949% {
transform: none;
}
71.15385%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(60) {
margin: 9em 21em;
animation-name: a60;
}
@keyframes a60 {
0%, 37.82051% {
transform: none;
}
71.79487%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(61) {
margin: 9em 24em;
animation-name: a61;
}
@keyframes a61 {
0%, 38.46154% {
transform: none;
}
72.4359%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(62) {
margin: 9em 27em;
animation-name: a62;
}
@keyframes a62 {
0%, 39.10256% {
transform: none;
}
73.07692%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(63) {
margin: 9em 30em;
animation-name: a63;
}
@keyframes a63 {
0%, 39.74359% {
transform: none;
}
73.71795%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(64) {
margin: 9em 33em;
animation-name: a64;
}
@keyframes a64 {
0%, 40.38462% {
transform: none;
}
74.35897%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(65) {
margin: 9em 36em;
animation-name: a65;
}
@keyframes a65 {
0%, 41.02564% {
transform: none;
}
75%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(66) {
margin: 6em 0em;
animation-name: a66;
}
@keyframes a66 {
0%, 41.66667% {
transform: none;
}
75.64103%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(67) {
margin: 6em 3em;
animation-name: a67;
}
@keyframes a67 {
0%, 42.30769% {
transform: none;
}
76.28205%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(68) {
margin: 6em 6em;
animation-name: a68;
}
@keyframes a68 {
0%, 42.94872% {
transform: none;
}
76.92308%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(69) {
margin: 6em 9em;
animation-name: a69;
}
@keyframes a69 {
0%, 43.58974% {
transform: none;
}
77.5641%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(70) {
margin: 6em 12em;
animation-name: a70;
}
@keyframes a70 {
0%, 44.23077% {
transform: none;
}
78.20513%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(71) {
margin: 6em 15em;
animation-name: a71;
}
@keyframes a71 {
0%, 44.87179% {
transform: none;
}
78.84615%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(72) {
margin: 6em 18em;
animation-name: a72;
}
@keyframes a72 {
0%, 45.51282% {
transform: none;
}
79.48718%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(73) {
margin: 6em 21em;
animation-name: a73;
}
@keyframes a73 {
0%, 46.15385% {
transform: none;
}
80.12821%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(74) {
margin: 6em 24em;
animation-name: a74;
}
@keyframes a74 {
0%, 46.79487% {
transform: none;
}
80.76923%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(75) {
margin: 6em 27em;
animation-name: a75;
}
@keyframes a75 {
0%, 47.4359% {
transform: none;
}
81.41026%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(76) {
margin: 6em 30em;
animation-name: a76;
}
@keyframes a76 {
0%, 48.07692% {
transform: none;
}
82.05128%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(77) {
margin: 6em 33em;
animation-name: a77;
}
@keyframes a77 {
0%, 48.71795% {
transform: none;
}
82.69231%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(78) {
margin: 6em 36em;
animation-name: a78;
}
@keyframes a78 {
0%, 49.35897% {
transform: none;
}
83.33333%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(79) {
margin: 3em 0em;
animation-name: a79;
}
@keyframes a79 {
0%, 50% {
transform: none;
}
83.97436%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(80) {
margin: 3em 3em;
animation-name: a80;
}
@keyframes a80 {
0%, 50.64103% {
transform: none;
}
84.61538%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(81) {
margin: 3em 6em;
animation-name: a81;
}
@keyframes a81 {
0%, 51.28205% {
transform: none;
}
85.25641%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(82) {
margin: 3em 9em;
animation-name: a82;
}
@keyframes a82 {
0%, 51.92308% {
transform: none;
}
85.89744%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(83) {
margin: 3em 12em;
animation-name: a83;
}
@keyframes a83 {
0%, 52.5641% {
transform: none;
}
86.53846%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(84) {
margin: 3em 15em;
animation-name: a84;
}
@keyframes a84 {
0%, 53.20513% {
transform: none;
}
87.17949%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(85) {
margin: 3em 18em;
animation-name: a85;
}
@keyframes a85 {
0%, 53.84615% {
transform: none;
}
87.82051%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(86) {
margin: 3em 21em;
animation-name: a86;
}
@keyframes a86 {
0%, 54.48718% {
transform: none;
}
88.46154%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(87) {
margin: 3em 24em;
animation-name: a87;
}
@keyframes a87 {
0%, 55.12821% {
transform: none;
}
89.10256%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(88) {
margin: 3em 27em;
animation-name: a88;
}
@keyframes a88 {
0%, 55.76923% {
transform: none;
}
89.74359%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(89) {
margin: 3em 30em;
animation-name: a89;
}
@keyframes a89 {
0%, 56.41026% {
transform: none;
}
90.38462%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(90) {
margin: 3em 33em;
animation-name: a90;
}
@keyframes a90 {
0%, 57.05128% {
transform: none;
}
91.02564%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(91) {
margin: 3em 36em;
animation-name: a91;
}
@keyframes a91 {
0%, 57.69231% {
transform: none;
}
91.66667%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(92) {
margin: 0em 0em;
animation-name: a92;
}
@keyframes a92 {
0%, 58.33333% {
transform: none;
}
92.30769%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(93) {
margin: 0em 3em;
animation-name: a93;
}
@keyframes a93 {
0%, 58.97436% {
transform: none;
}
92.94872%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(94) {
margin: 0em 6em;
animation-name: a94;
}
@keyframes a94 {
0%, 59.61538% {
transform: none;
}
93.58974%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(95) {
margin: 0em 9em;
animation-name: a95;
}
@keyframes a95 {
0%, 60.25641% {
transform: none;
}
94.23077%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(96) {
margin: 0em 12em;
animation-name: a96;
}
@keyframes a96 {
0%, 60.89744% {
transform: none;
}
94.87179%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(97) {
margin: 0em 15em;
animation-name: a97;
}
@keyframes a97 {
0%, 61.53846% {
transform: none;
}
95.51282%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(98) {
margin: 0em 18em;
animation-name: a98;
}
@keyframes a98 {
0%, 62.17949% {
transform: none;
}
96.15385%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(99) {
margin: 0em 21em;
animation-name: a99;
}
@keyframes a99 {
0%, 62.82051% {
transform: none;
}
96.79487%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(100) {
margin: 0em 24em;
animation-name: a100;
}
@keyframes a100 {
0%, 63.46154% {
transform: none;
}
97.4359%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(101) {
margin: 0em 27em;
animation-name: a101;
}
@keyframes a101 {
0%, 64.10256% {
transform: none;
}
98.07692%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(102) {
margin: 0em 30em;
animation-name: a102;
}
@keyframes a102 {
0%, 64.74359% {
transform: none;
}
98.71795%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(103) {
margin: 0em 33em;
animation-name: a103;
}
@keyframes a103 {
0%, 65.38462% {
transform: none;
}
99.35897%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:nth-child(104) {
margin: 0em 36em;
animation-name: a104;
}
@keyframes a104 {
0%, 66.02564% {
transform: none;
}
100%,
100% {
transform: translateY(27em) rotate(3turn);
}
}
.tile:before,
.tile:after {
width: inherit;
height: inherit;
box-shadow: inherit;
background: currentColor;
animation: switch 24s steps(1) infinite;
content: '';
}
.tile:before {
color: #d25831;
}
.tile:after {
color: #c1c451;
animation-delay: -8s;
}
@keyframes switch {
33.33333%, 100% {
opacity: .001;
}
}
總結
以上是生活随笔為你收集整理的设置css3动画的顺序,CSS3 “瓷砖”顺序飘落的动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 50%硫酸洗涤时不分层是什么原因?应怎么
- 下一篇： 绝地求生12月18日服务器信息,绝地求生