CSS
语言：
CSSSCSS
确定
html,
body {
height: 100%;
}
body {
background: black;
overflow: hidden;
}
.wrap {
height: 300px;
width: 600px;
position: relative;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -150px;
}
.photo {
width: inherit;
height: inherit;
display: block;
position: absolute;
}
.photo:after {
content: "";
display: table;
clear: both;
}
.p {
height: 300px;
width: 12px;
background-repeat: no-repeat;
float: left;
opacity: 0;
}
.p:nth-child(1) {
background-position: 0px 0px;
}
.p:nth-child(2) {
background-position: -12px 0px;
}
.p:nth-child(3) {
background-position: -24px 0px;
}
.p:nth-child(4) {
background-position: -36px 0px;
}
.p:nth-child(5) {
background-position: -48px 0px;
}
.p:nth-child(6) {
background-position: -60px 0px;
}
.p:nth-child(7) {
background-position: -72px 0px;
}
.p:nth-child(8) {
background-position: -84px 0px;
}
.p:nth-child(9) {
background-position: -96px 0px;
}
.p:nth-child(10) {
background-position: -108px 0px;
}
.p:nth-child(11) {
background-position: -120px 0px;
}
.p:nth-child(12) {
background-position: -132px 0px;
}
.p:nth-child(13) {
background-position: -144px 0px;
}
.p:nth-child(14) {
background-position: -156px 0px;
}
.p:nth-child(15) {
background-position: -168px 0px;
}
.p:nth-child(16) {
background-position: -180px 0px;
}
.p:nth-child(17) {
background-position: -192px 0px;
}
.p:nth-child(18) {
background-position: -204px 0px;
}
.p:nth-child(19) {
background-position: -216px 0px;
}
.p:nth-child(20) {
background-position: -228px 0px;
}
.p:nth-child(21) {
background-position: -240px 0px;
}
.p:nth-child(22) {
background-position: -252px 0px;
}
.p:nth-child(23) {
background-position: -264px 0px;
}
.p:nth-child(24) {
background-position: -276px 0px;
}
.p:nth-child(25) {
background-position: -288px 0px;
}
.p:nth-child(26) {
background-position: -300px 0px;
}
.p:nth-child(27) {
background-position: -312px 0px;
}
.p:nth-child(28) {
background-position: -324px 0px;
}
.p:nth-child(29) {
background-position: -336px 0px;
}
.p:nth-child(30) {
background-position: -348px 0px;
}
.p:nth-child(31) {
background-position: -360px 0px;
}
.p:nth-child(32) {
background-position: -372px 0px;
}
.p:nth-child(33) {
background-position: -384px 0px;
}
.p:nth-child(34) {
background-position: -396px 0px;
}
.p:nth-child(35) {
background-position: -408px 0px;
}
.p:nth-child(36) {
background-position: -420px 0px;
}
.p:nth-child(37) {
background-position: -432px 0px;
}
.p:nth-child(38) {
background-position: -444px 0px;
}
.p:nth-child(39) {
background-position: -456px 0px;
}
.p:nth-child(40) {
background-position: -468px 0px;
}
.p:nth-child(41) {
background-position: -480px 0px;
}
.p:nth-child(42) {
background-position: -492px 0px;
}
.p:nth-child(43) {
background-position: -504px 0px;
}
.p:nth-child(44) {
background-position: -516px 0px;
}
.p:nth-child(45) {
background-position: -528px 0px;
}
.p:nth-child(46) {
background-position: -540px 0px;
}
.p:nth-child(47) {
background-position: -552px 0px;
}
.p:nth-child(48) {
background-position: -564px 0px;
}
.p:nth-child(49) {
background-position: -576px 0px;
}
.p:nth-child(50) {
background-position: -588px 0px;
}
.photo:nth-child(1) {
z-index: 2;
}
.photo:nth-child(1) .p {
background-image: url(http://lorempixel.com/600/300/technics/?v=1);
}
.photo:nth-child(1) .p:nth-child(1) {
animation: split1 18s infinite;
animation-delay: 0.01s;
}
@keyframes split1 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 609.01172px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(2) {
animation: split2 18s infinite;
animation-delay: 0.02s;
}
@keyframes split2 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 225.62693px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(3) {
animation: split3 18s infinite;
animation-delay: 0.03s;
}
@keyframes split3 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 62.02912px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(4) {
animation: split4 18s infinite;
animation-delay: 0.04s;
}
@keyframes split4 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 759.60851px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(5) {
animation: split5 18s infinite;
animation-delay: 0.05s;
}
@keyframes split5 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 596.7401px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(6) {
animation: split6 18s infinite;
animation-delay: 0.06s;
}
@keyframes split6 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 26.75209px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(7) {
animation: split7 18s infinite;
animation-delay: 0.07s;
}
@keyframes split7 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -127.66867px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(8) {
animation: split8 18s infinite;
animation-delay: 0.08s;
}
@keyframes split8 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 346.87325px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(9) {
animation: split9 18s infinite;
animation-delay: 0.09s;
}
@keyframes split9 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 300.24373px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(10) {
animation: split10 18s infinite;
animation-delay: 0.1s;
}
@keyframes split10 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -376.30915px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(11) {
animation: split11 18s infinite;
animation-delay: 0.11s;
}
@keyframes split11 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 561.67296px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(12) {
animation: split12 18s infinite;
animation-delay: 0.12s;
}
@keyframes split12 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -86.9914px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(13) {
animation: split13 18s infinite;
animation-delay: 0.13s;
}
@keyframes split13 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 413.31607px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(14) {
animation: split14 18s infinite;
animation-delay: 0.14s;
}
@keyframes split14 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 514.30224px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(15) {
animation: split15 18s infinite;
animation-delay: 0.15s;
}
@keyframes split15 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 827.17795px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(16) {
animation: split16 18s infinite;
animation-delay: 0.16s;
}
@keyframes split16 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -470.12607px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(17) {
animation: split17 18s infinite;
animation-delay: 0.17s;
}
@keyframes split17 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -223.51403px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(18) {
animation: split18 18s infinite;
animation-delay: 0.18s;
}
@keyframes split18 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 334.88171px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(19) {
animation: split19 18s infinite;
animation-delay: 0.19s;
}
@keyframes split19 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -308.40331px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(20) {
animation: split20 18s infinite;
animation-delay: 0.2s;
}
@keyframes split20 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -213.86475px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(21) {
animation: split21 18s infinite;
animation-delay: 0.21s;
}
@keyframes split21 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 490.04419px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(22) {
animation: split22 18s infinite;
animation-delay: 0.22s;
}
@keyframes split22 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 591.93442px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(23) {
animation: split23 18s infinite;
animation-delay: 0.23s;
}
@keyframes split23 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -43.76123px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(24) {
animation: split24 18s infinite;
animation-delay: 0.24s;
}
@keyframes split24 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -35.67113px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(25) {
animation: split25 18s infinite;
animation-delay: 0.25s;
}
@keyframes split25 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -421.7799px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(26) {
animation: split26 18s infinite;
animation-delay: 0.26s;
}
@keyframes split26 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 473.36744px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(27) {
animation: split27 18s infinite;
animation-delay: 0.27s;
}
@keyframes split27 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -92.05515px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(28) {
animation: split28 18s infinite;
animation-delay: 0.28s;
}
@keyframes split28 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 347.99646px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(29) {
animation: split29 18s infinite;
animation-delay: 0.29s;
}
@keyframes split29 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 304.71818px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(30) {
animation: split30 18s infinite;
animation-delay: 0.3s;
}
@keyframes split30 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -346.75517px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(31) {
animation: split31 18s infinite;
animation-delay: 0.31s;
}
@keyframes split31 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -114.55491px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(32) {
animation: split32 18s infinite;
animation-delay: 0.32s;
}
@keyframes split32 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 431.73742px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(33) {
animation: split33 18s infinite;
animation-delay: 0.33s;
}
@keyframes split33 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 53.16821px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(34) {
animation: split34 18s infinite;
animation-delay: 0.34s;
}
@keyframes split34 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 549.21043px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(35) {
animation: split35 18s infinite;
animation-delay: 0.35s;
}
@keyframes split35 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 279.77583px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(36) {
animation: split36 18s infinite;
animation-delay: 0.36s;
}
@keyframes split36 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -47.7466px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(37) {
animation: split37 18s infinite;
animation-delay: 0.37s;
}
@keyframes split37 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -197.13422px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(38) {
animation: split38 18s infinite;
animation-delay: 0.38s;
}
@keyframes split38 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -72.46289px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(39) {
animation: split39 18s infinite;
animation-delay: 0.39s;
}
@keyframes split39 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -136.36101px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(40) {
animation: split40 18s infinite;
animation-delay: 0.4s;
}
@keyframes split40 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 337.38995px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(41) {
animation: split41 18s infinite;
animation-delay: 0.41s;
}
@keyframes split41 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 346.64448px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(42) {
animation: split42 18s infinite;
animation-delay: 0.42s;
}
@keyframes split42 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 580.02933px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(43) {
animation: split43 18s infinite;
animation-delay: 0.43s;
}
@keyframes split43 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 276.35559px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(44) {
animation: split44 18s infinite;
animation-delay: 0.44s;
}
@keyframes split44 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 172.26622px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(45) {
animation: split45 18s infinite;
animation-delay: 0.45s;
}
@keyframes split45 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 80.67867px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(46) {
animation: split46 18s infinite;
animation-delay: 0.46s;
}
@keyframes split46 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 420.07644px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(47) {
animation: split47 18s infinite;
animation-delay: 0.47s;
}
@keyframes split47 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 282.18385px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(48) {
animation: split48 18s infinite;
animation-delay: 0.48s;
}
@keyframes split48 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, -81.46012px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(49) {
animation: split49 18s infinite;
animation-delay: 0.49s;
}
@keyframes split49 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 632.38883px, 0);
opacity: 0;
}
}
.photo:nth-child(1) .p:nth-child(50) {
animation: split50 18s infinite;
animation-delay: 0.5s;
}
@keyframes split50 {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
16.66667% {
transform: translate3d(0, 701.1321px, 0);
opacity: 0;
}
}
.photo:nth-child(2) {
z-index: 1;
}
.photo:nth-child(2) .p {
background-image: url(http://lorempixel.com/600/300/technics/?v=2);
}
.photo:nth-child(2) .p:nth-child(1) {
animation: split1 18s infinite;
animation-delay: 6.01s;
}
@keyframes split1 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -396.99807px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(2) {
animation: split2 18s infinite;
animation-delay: 6.02s;
}
@keyframes split2 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -8.86921px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(3) {
animation: split3 18s infinite;
animation-delay: 6.03s;
}
@keyframes split3 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 42.25656px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(4) {
animation: split4 18s infinite;
animation-delay: 6.04s;
}
@keyframes split4 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 611.55883px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(5) {
animation: split5 18s infinite;
animation-delay: 6.05s;
}
@keyframes split5 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 1.72567px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(6) {
animation: split6 18s infinite;
animation-delay: 6.06s;
}
@keyframes split6 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 63.74214px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(7) {
animation: split7 18s infinite;
animation-delay: 6.07s;
}
@keyframes split7 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 159.99682px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(8) {
animation: split8 18s infinite;
animation-delay: 6.08s;
}
@keyframes split8 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -306.39642px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(9) {
animation: split9 18s infinite;
animation-delay: 6.09s;
}
@keyframes split9 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 570.14818px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(10) {
animation: split10 18s infinite;
animation-delay: 6.1s;
}
@keyframes split10 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 25.02217px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(11) {
animation: split11 18s infinite;
animation-delay: 6.11s;
}
@keyframes split11 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 143.73744px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(12) {
animation: split12 18s infinite;
animation-delay: 6.12s;
}
@keyframes split12 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 247.4319px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(13) {
animation: split13 18s infinite;
animation-delay: 6.13s;
}
@keyframes split13 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -340.56082px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(14) {
animation: split14 18s infinite;
animation-delay: 6.14s;
}
@keyframes split14 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 542.31429px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(15) {
animation: split15 18s infinite;
animation-delay: 6.15s;
}
@keyframes split15 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 745.5425px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(16) {
animation: split16 18s infinite;
animation-delay: 6.16s;
}
@keyframes split16 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -382.66321px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(17) {
animation: split17 18s infinite;
animation-delay: 6.17s;
}
@keyframes split17 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 164.38894px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(18) {
animation: split18 18s infinite;
animation-delay: 6.18s;
}
@keyframes split18 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -120.09778px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(19) {
animation: split19 18s infinite;
animation-delay: 6.19s;
}
@keyframes split19 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -390.65283px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(20) {
animation: split20 18s infinite;
animation-delay: 6.2s;
}
@keyframes split20 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -330.99784px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(21) {
animation: split21 18s infinite;
animation-delay: 6.21s;
}
@keyframes split21 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -298.72797px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(22) {
animation: split22 18s infinite;
animation-delay: 6.22s;
}
@keyframes split22 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 825.52861px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(23) {
animation: split23 18s infinite;
animation-delay: 6.23s;
}
@keyframes split23 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 627.53816px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(24) {
animation: split24 18s infinite;
animation-delay: 6.24s;
}
@keyframes split24 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 240.11854px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(25) {
animation: split25 18s infinite;
animation-delay: 6.25s;
}
@keyframes split25 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 809.01401px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(26) {
animation: split26 18s infinite;
animation-delay: 6.26s;
}
@keyframes split26 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -159.30473px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(27) {
animation: split27 18s infinite;
animation-delay: 6.27s;
}
@keyframes split27 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 56.31813px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(28) {
animation: split28 18s infinite;
animation-delay: 6.28s;
}
@keyframes split28 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -349.46677px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(29) {
animation: split29 18s infinite;
animation-delay: 6.29s;
}
@keyframes split29 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -373.92479px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(30) {
animation: split30 18s infinite;
animation-delay: 6.3s;
}
@keyframes split30 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 420.26449px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(31) {
animation: split31 18s infinite;
animation-delay: 6.31s;
}
@keyframes split31 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -579.43033px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(32) {
animation: split32 18s infinite;
animation-delay: 6.32s;
}
@keyframes split32 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 285.33257px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(33) {
animation: split33 18s infinite;
animation-delay: 6.33s;
}
@keyframes split33 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 200.57227px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(34) {
animation: split34 18s infinite;
animation-delay: 6.34s;
}
@keyframes split34 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 143.03152px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(35) {
animation: split35 18s infinite;
animation-delay: 6.35s;
}
@keyframes split35 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 314.85667px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(36) {
animation: split36 18s infinite;
animation-delay: 6.36s;
}
@keyframes split36 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -329.65751px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(37) {
animation: split37 18s infinite;
animation-delay: 6.37s;
}
@keyframes split37 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 285.28222px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(38) {
animation: split38 18s infinite;
animation-delay: 6.38s;
}
@keyframes split38 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 550.21956px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(39) {
animation: split39 18s infinite;
animation-delay: 6.39s;
}
@keyframes split39 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -417.01915px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(40) {
animation: split40 18s infinite;
animation-delay: 6.4s;
}
@keyframes split40 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 697.62892px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(41) {
animation: split41 18s infinite;
animation-delay: 6.41s;
}
@keyframes split41 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 785.26848px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(42) {
animation: split42 18s infinite;
animation-delay: 6.42s;
}
@keyframes split42 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -110.89279px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(43) {
animation: split43 18s infinite;
animation-delay: 6.43s;
}
@keyframes split43 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 389.97936px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(44) {
animation: split44 18s infinite;
animation-delay: 6.44s;
}
@keyframes split44 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -118.82579px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(45) {
animation: split45 18s infinite;
animation-delay: 6.45s;
}
@keyframes split45 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, -286.33731px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(46) {
animation: split46 18s infinite;
animation-delay: 6.46s;
}
@keyframes split46 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 107.55323px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(47) {
animation: split47 18s infinite;
animation-delay: 6.47s;
}
@keyframes split47 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 219.91651px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(48) {
animation: split48 18s infinite;
animation-delay: 6.48s;
}
@keyframes split48 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 247.82064px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(49) {
animation: split49 18s infinite;
animation-delay: 6.49s;
}
@keyframes split49 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 537.03353px, 0);
opacity: 0;
}
}
.photo:nth-child(2) .p:nth-child(50) {
animation: split50 18s infinite;
animation-delay: 6.5s;
}
@keyframes split50 {
16.66667% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
33.33333% {
transform: translate3d(0, 38.04199px, 0);
opacity: 0;
}
}
.photo:nth-child(3) {
z-index: 0;
}
.photo:nth-child(3) .p {
background-image: url(http://lorempixel.com/600/300/technics/?v=3);
}
.photo:nth-child(3) .p:nth-child(1) {
animation: split1 18s infinite;
animation-delay: 12.01s;
}
@keyframes split1 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 311.60395px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(2) {
animation: split2 18s infinite;
animation-delay: 12.02s;
}
@keyframes split2 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 432.88712px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(3) {
animation: split3 18s infinite;
animation-delay: 12.03s;
}
@keyframes split3 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 299.11756px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(4) {
animation: split4 18s infinite;
animation-delay: 12.04s;
}
@keyframes split4 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 38.75729px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(5) {
animation: split5 18s infinite;
animation-delay: 12.05s;
}
@keyframes split5 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 391.76744px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(6) {
animation: split6 18s infinite;
animation-delay: 12.06s;
}
@keyframes split6 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, -132.48588px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(7) {
animation: split7 18s infinite;
animation-delay: 12.07s;
}
@keyframes split7 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 81.01258px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(8) {
animation: split8 18s infinite;
animation-delay: 12.08s;
}
@keyframes split8 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 229.00591px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(9) {
animation: split9 18s infinite;
animation-delay: 12.09s;
}
@keyframes split9 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 745.90376px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(10) {
animation: split10 18s infinite;
animation-delay: 12.1s;
}
@keyframes split10 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 117.20649px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(11) {
animation: split11 18s infinite;
animation-delay: 12.11s;
}
@keyframes split11 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, -474.80298px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(12) {
animation: split12 18s infinite;
animation-delay: 12.12s;
}
@keyframes split12 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, -216.27634px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(13) {
animation: split13 18s infinite;
animation-delay: 12.13s;
}
@keyframes split13 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, -306.12939px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(14) {
animation: split14 18s infinite;
animation-delay: 12.14s;
}
@keyframes split14 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 588.35365px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(15) {
animation: split15 18s infinite;
animation-delay: 12.15s;
}
@keyframes split15 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 725.44467px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(16) {
animation: split16 18s infinite;
animation-delay: 12.16s;
}
@keyframes split16 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 612.72477px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(17) {
animation: split17 18s infinite;
animation-delay: 12.17s;
}
@keyframes split17 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 40.07934px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(18) {
animation: split18 18s infinite;
animation-delay: 12.18s;
}
@keyframes split18 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 780.36946px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(19) {
animation: split19 18s infinite;
animation-delay: 12.19s;
}
@keyframes split19 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, -103.57195px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(20) {
animation: split20 18s infinite;
animation-delay: 12.2s;
}
@keyframes split20 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 247.44217px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(21) {
animation: split21 18s infinite;
animation-delay: 12.21s;
}
@keyframes split21 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 108.32841px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(22) {
animation: split22 18s infinite;
animation-delay: 12.22s;
}
@keyframes split22 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 719.91775px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(23) {
animation: split23 18s infinite;
animation-delay: 12.23s;
}
@keyframes split23 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, -241.61903px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(24) {
animation: split24 18s infinite;
animation-delay: 12.24s;
}
@keyframes split24 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 362.65228px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(25) {
animation: split25 18s infinite;
animation-delay: 12.25s;
}
@keyframes split25 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 785.23856px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(26) {
animation: split26 18s infinite;
animation-delay: 12.26s;
}
@keyframes split26 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 53.36537px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(27) {
animation: split27 18s infinite;
animation-delay: 12.27s;
}
@keyframes split27 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 287.58504px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(28) {
animation: split28 18s infinite;
animation-delay: 12.28s;
}
@keyframes split28 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 36.06649px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(29) {
animation: split29 18s infinite;
animation-delay: 12.29s;
}
@keyframes split29 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, -52.57527px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(30) {
animation: split30 18s infinite;
animation-delay: 12.3s;
}
@keyframes split30 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, -465.54714px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(31) {
animation: split31 18s infinite;
animation-delay: 12.31s;
}
@keyframes split31 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 161.08714px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(32) {
animation: split32 18s infinite;
animation-delay: 12.32s;
}
@keyframes split32 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 167.32329px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(33) {
animation: split33 18s infinite;
animation-delay: 12.33s;
}
@keyframes split33 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, -370.62235px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(34) {
animation: split34 18s infinite;
animation-delay: 12.34s;
}
@keyframes split34 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, -175.00368px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(35) {
animation: split35 18s infinite;
animation-delay: 12.35s;
}
@keyframes split35 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 182.45709px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(36) {
animation: split36 18s infinite;
animation-delay: 12.36s;
}
@keyframes split36 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 89.14183px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(37) {
animation: split37 18s infinite;
animation-delay: 12.37s;
}
@keyframes split37 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 339.66249px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(38) {
animation: split38 18s infinite;
animation-delay: 12.38s;
}
@keyframes split38 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 419.7918px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(39) {
animation: split39 18s infinite;
animation-delay: 12.39s;
}
@keyframes split39 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 68.80653px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(40) {
animation: split40 18s infinite;
animation-delay: 12.4s;
}
@keyframes split40 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 94.65102px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(41) {
animation: split41 18s infinite;
animation-delay: 12.41s;
}
@keyframes split41 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 356.4627px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(42) {
animation: split42 18s infinite;
animation-delay: 12.42s;
}
@keyframes split42 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, -308.62588px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(43) {
animation: split43 18s infinite;
animation-delay: 12.43s;
}
@keyframes split43 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 79.88228px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(44) {
animation: split44 18s infinite;
animation-delay: 12.44s;
}
@keyframes split44 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, -292.22624px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(45) {
animation: split45 18s infinite;
animation-delay: 12.45s;
}
@keyframes split45 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 7.23675px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(46) {
animation: split46 18s infinite;
animation-delay: 12.46s;
}
@keyframes split46 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 313.78566px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(47) {
animation: split47 18s infinite;
animation-delay: 12.47s;
}
@keyframes split47 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, -104.23055px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(48) {
animation: split48 18s infinite;
animation-delay: 12.48s;
}
@keyframes split48 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 133.51536px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(49) {
animation: split49 18s infinite;
animation-delay: 12.49s;
}
@keyframes split49 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 266.18297px, 0);
opacity: 0;
}
}
.photo:nth-child(3) .p:nth-child(50) {
animation: split50 18s infinite;
animation-delay: 12.5s;
}
@keyframes split50 {
33.33333% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
50% {
transform: translate3d(0, 538.10828px, 0);
opacity: 0;
}
}
662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
