设置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 “瓷砖”顺序飘落的动画相关推荐
- [置顶] HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长.因为就在最近,Adobe宣布Flash将不再支持移动设备.这意味着,Adobe自身 ...
- 定义动画名字html,CSS3 animation-name属性怎么用？
css3 animation-name属性是用来检索或设置对象所应用的动画名称,必须与@keyframes配合使用,因为动画名称由@keyframes定义 :如果有多个属性值,可以用逗号进行分隔. c ...
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长.因为就在最近,Adobe宣布Flash将不再支持移动设备.这意味着,Adobe自身 ...
- html动画图片重叠,CSS3炫酷堆叠图片展示动画特效
这是一款效果的CSS3炫酷堆叠图片展示动画特效.该堆叠图片展示效果是将一组图片堆叠在一起,然后以各种CSS动画效果来切换最上面的一张图片.该特效将使用纯CSS3制作,它可以在所有现代浏览器和移动设备上 ...
- css3 3d 太阳系,使用css3的动画模拟太阳系恒星公转
原标题:使用css3的动画模拟太阳系恒星公转 本文介绍使用css3的animation画一个太阳系恒星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际 ...
- css3之实现网红正方体相册弹开动画
这里讲解实现抖音网红的正方体相册的动画制作(大正方体包裹小正方体,鼠标点击大正方体弹开展现小正方体). 先上效果图: 1. 基础结构 老规矩,先写好基础结构.这里关于3D动画制作原理及正方体简单旋转制 ...
- 安卓入门-动画（Animation）（由简单的单一动画到复杂的时间顺序叠加动画）（XML实现方式+JAVA实现方式）
文章目录 三个要做的动画 理论知识 1. XML文件设置 2.JAVA代码设置 具体实例实现(JAVA代码方式) 动画一(赛车的外内外走线) 动画二(转向不足的动画) 动画三(转向过度的动画)(复杂的 ...
- html制作小车,HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
当前位置:编程学习 > html/css >> HTML5 实现小车动画效果(Canvas/CSS3/JQuery) HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来 ...
- html制作小车,HTML5 实现小车动画效果(Canvas/CSS3/JQuery) 付完整源码
[实例简介] 分三种方式实现: (1) canvas元素结合JS (2) 纯粹的CSS3动画(暂不被所有主流浏览器支持,比如IE) (3) CSS3结合Jquery实现 知道如何使用CSS ...
- php magic模版插件,magic-带64种动画效果的CSS3动画库
magic.css是一款带64种动画效果的CSS3动画库.magic.css中的动画分为12大类,全部使用CSS3 animation动画来完成.各种效果使用非常简单,只需要为元素添加和移除相应的cl ...
最新文章
- iOS 开发之时间选择器
- 在开发游戏过程中遇到的一些错误（很基础的错误）
- qfile 计算文件有多少行_肉牛不喂精料行吗？如何计算肉牛一天喂多少精料？
- Qt 程序获取各种文件路径方法
- t分布 u分布 卡方分布_中心极限定理|z分布|t分布|卡方分布
- oracle推送短信,ORACLE 10G如何实现发短信的服务?
- 【转载】可能是把Docker的概念讲的最清楚的一篇文章
- thttpd支持php吗,轻量型thttpd+php5
- java下载ftp_Java FTP下载文件
- Unable to process Jar entry
- 如何快速了解两份BOM的差异
- 虚拟服务器修改教程,飘渺雪域商业一键虚拟端+修改元宝教程【无标题亲测
- Matlab程序控制示波器,基于MATLAB的虚拟示波器设计.PDF
- centos Unison+Inotify双向同步
- 关于提问的一些书籍及文章
- RabbitMQ极速入门
- 5.23 通过自定义筛选查找指定城市的指定工作人员 [原创Excel教程]
- iOS 直播 —— 推流
- 开始做一个简单的记账工具
- linux发行版中的i386/i686/x86-64/有什么区别?