{"id":2272,"date":"2018-03-24T13:45:48","date_gmt":"2018-03-24T13:45:48","guid":{"rendered":"http:\/\/thingography.com\/?p=2272"},"modified":"2025-02-13T20:56:02","modified_gmt":"2025-02-13T20:56:02","slug":"css-photo-trans","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-photo-trans\/","title":{"rendered":"CSS Photo Transitions"},"content":{"rendered":"<style>\n.ani-box {\n\tmargin: 0 auto;\n\twidth: 100%;\n\theight: auto;\n\tposition: relative;\noverflow: hidden;\n}\n#photos {\n\twidth: 80%;\n\tposition: relative;\n\tmargin: 0 auto;\n\theight: 100%;\n\tmax-width: 980px;\ntop: 0;\n}\n.pix1 img, .pix2 img, .pix3 img, .pix4 img, .pix5 img, .pix6 img {\n\twidth: 100%;\n\tvisibility: hidden;\n\tborder-radius: 1px;\n\theight: auto;\n\tbox-shadow: 0 0 2px 2px #000;\n\tposition: absolute;\n\ttop: 0;\n\tleft:0;\n}\n.pix2 img, .pix3 img, .pix4 img, .pix5 img {\n\tanimation-timing-function: linear;\n\tanimation-duration: 7s;\n}\n.pix1 img {\n\tmargin-top: 0;\n\tanimation-name: photo;\n\tanimation-duration: 5s;\n\tanimation-timing-function: linear;\n}\n.pix2 img  {\n\tanimation-name: photo2;\n\tanimation-delay: 5s;\n}\n.pix3 img {\n\tanimation-name: photo3;\n\tanimation-delay: 12s;\n}\n.pix4 img {\n\tanimation-name: photo4;\n\tanimation-delay: 19s;\n}\n.pix5 img {\n\tanimation-name: photo5;\n\tanimation-delay: 26s;\n}\n.pix6 img {\n\tanimation-name: photo6;\n\tanimation-delay: 33s;\n\tanimation-duration: 1000s;\n\tanimation-timing-function: linear;\n}\n@keyframes exit2 {\n\t0%  {opacity:0;}\n\t100%{opacity:0;}\n}\n@keyframes photo {\n\t0%   {transform: rotateX( 0deg); visibility: visible;}\n\t75%  {transform: rotateX( 0deg);}\n\t100% {transform: rotateX(90deg);}\n}\n@keyframes photo2 {\n\t0%   {transform: rotateX(-90deg); visibility: visible;}\n\t20%  {transform: rotateX(  0deg);}\n\t75%  {transform: rotateX(  0deg) rotateY(0deg);}\n\t100% {transform: rotateY( 90deg);}\n}\n@keyframes photo3 {\n\t0%   {transform: rotateY(-90deg); visibility: visible;}\n\t20%  {transform: rotateY(  0deg);}\n\t75%  {transform: rotateY(  0deg);}\n\t100% {transform: rotateY( 90deg);}\n}\n@keyframes photo4 {\n\t0%   {transform: rotateY(270deg) scale(1,1); visibility: visible;}\n\t20%  {transform: rotateY(  0deg) scale(1,1);}\n\t75%  {transform: rotateY(  0deg) scale(1,1);}\n\t100% {transform: rotateY(  0deg) scale(0.01,0.01);}\n}\n@keyframes photo5 {\n\t0%   {transform: scale(0.01,0.01) rotateZ(   0deg); visibility: visible;}\n\t20%  {transform: scale(1,1)       rotateZ(   0deg);}\n\t75%  {transform: scale(1,1)       rotateZ(   0deg);}\n\t100% {transform: scale(0.01,0.01) rotateZ(1080deg);}\n}\n@keyframes photo6 {\n\t0%    {transform: scale(0.01,0.01) rotateZ(1080deg); visibility: visible;}\n\t0.2%  {transform: scale(1,1)       rotateZ(   0deg);}\n\t0.7%  {transform: scale(1,1)       rotateZ(   0deg);}\n\t100%  {transform: scale(1,1)       rotateZ(   0deg);}\n}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"photos\">\n<div class=\"pix1\"><img decoding=\"async\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/photo-trans\/blue-flowers.jpg\" alt=\"Blue-Flowers\" \/><\/div>\n<div class=\"pix2\"><img decoding=\"async\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/photo-trans\/twilight-moon.jpg\" alt=\"Twilight-moon\" \/><\/div>\n<div class=\"pix3\"><img decoding=\"async\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/photo-trans\/girl.jpg\" alt=\"Girl-Riding\" \/><\/div>\n<div class=\"pix4\"><img decoding=\"async\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/photo-trans\/hibiscus.jpg\" alt=\"Hibiscus-Flower\" \/><\/div>\n<div class=\"pix5\"><img decoding=\"async\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/photo-trans\/blue-flowers.jpg\" alt=\"Blue-Flowers\" \/><\/div>\n<div class=\"pix6\"><img decoding=\"async\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/photo-trans\/twilight-moon.jpg\" alt=\"Twilight-moon\" \/><\/div>\n<\/p><\/div>\n<p> <!-- photos  --><\/p>\n<\/div>\n<p> <!--  Ani  --><\/p>\n<div class=\"below-ani\"> A CSS photo transition created with CSS transform. To replay just reload the page. <\/div>\n","protected":false},"excerpt":{"rendered":"<p>A CSS photo transition created with CSS transform. To replay just reload the page.<\/p>\n","protected":false},"author":2,"featured_media":2596,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,222,221],"class_list":["post-2272","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-css","tag-css-animation","tag-css-transform","tag-photo-transitions"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=2272"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2272\/revisions"}],"predecessor-version":[{"id":2295,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2272\/revisions\/2295"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2596"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}