CSS transform – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 13:57:10 +0000 en-US hourly 1 CSS Photo Transitions https://thingography.com/css-photo-trans/ https://thingography.com/css-photo-trans/#respond Sat, 24 Mar 2018 13:45:48 +0000 http://thingography.com/?p=2272 .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);} }
Blue-Flowers
Twilight-moon
Girl-Riding
Hibiscus-Flower
Blue-Flowers
Twilight-moon

A CSS photo transition created with CSS transform. To replay just reload the page.
]]> https://thingography.com/css-photo-trans/feed/ 0