.ani-box {
margin: 0 auto;
width: 100%;
height: auto;
position: relative;
overflow: hidden;
}
#photos {
width: 80%;
position: relative;
margin: 0 auto;
height: 100%;
max-width: 980px;
top: 0;
}
.pix1 img, .pix2 img, .pix3 img, .pix4 img, .pix5 img, .pix6 img {
width: 100%;
visibility: hidden;
border-radius: 1px;
height: auto;
box-shadow: 0 0 2px 2px #000;
position: absolute;
top: 0;
left:0;
}
.pix2 img, .pix3 img, .pix4 img, .pix5 img {
animation-timing-function: linear;
animation-duration: 7s;
}
.pix1 img {
margin-top: 0;
animation-name: photo;
animation-duration: 5s;
animation-timing-function: linear;
}
.pix2 img {
animation-name: photo2;
animation-delay: 5s;
}
.pix3 img {
animation-name: photo3;
animation-delay: 12s;
}
.pix4 img {
animation-name: photo4;
animation-delay: 19s;
}
.pix5 img {
animation-name: photo5;
animation-delay: 26s;
}
.pix6 img {
animation-name: photo6;
animation-delay: 33s;
animation-duration: 1000s;
animation-timing-function: linear;
}
@keyframes exit2 {
0% {opacity:0;}
100%{opacity:0;}
}
@keyframes photo {
0% {transform: rotateX( 0deg); visibility: visible;}
75% {transform: rotateX( 0deg);}
100% {transform: rotateX(90deg);}
}
@keyframes photo2 {
0% {transform: rotateX(-90deg); visibility: visible;}
20% {transform: rotateX( 0deg);}
75% {transform: rotateX( 0deg) rotateY(0deg);}
100% {transform: rotateY( 90deg);}
}
@keyframes photo3 {
0% {transform: rotateY(-90deg); visibility: visible;}
20% {transform: rotateY( 0deg);}
75% {transform: rotateY( 0deg);}
100% {transform: rotateY( 90deg);}
}
@keyframes photo4 {
0% {transform: rotateY(270deg) scale(1,1); visibility: visible;}
20% {transform: rotateY( 0deg) scale(1,1);}
75% {transform: rotateY( 0deg) scale(1,1);}
100% {transform: rotateY( 0deg) scale(0.01,0.01);}
}
@keyframes photo5 {
0% {transform: scale(0.01,0.01) rotateZ( 0deg); visibility: visible;}
20% {transform: scale(1,1) rotateZ( 0deg);}
75% {transform: scale(1,1) rotateZ( 0deg);}
100% {transform: scale(0.01,0.01) rotateZ(1080deg);}
}
@keyframes photo6 {
0% {transform: scale(0.01,0.01) rotateZ(1080deg); visibility: visible;}
0.2% {transform: scale(1,1) rotateZ( 0deg);}
0.7% {transform: scale(1,1) rotateZ( 0deg);}
100% {transform: scale(1,1) rotateZ( 0deg);}
}
A CSS photo transition created with CSS transform. To replay just reload the page.
]]>
