transtion effect – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:10:38 +0000 en-US hourly 1 Transition Mix Pure CSS Animation https://thingography.com/css-transition-mix/ https://thingography.com/css-transition-mix/#respond Wed, 14 Mar 2018 02:02:36 +0000 http://thingography.com/?p=2034 .ani-box {width: 100%; height: 700px; overflow:hidden; margin-top 0;} .cont { margin: 0 auto; width: 90%; height: auto; position: relative; } .cont div { width: 100px; height: 100px; border-radius: 0px; background-color: yellow; animation: roll 50s linear infinite; display: inline-block; margin-right: auto; margin-left: auto; } @keyframes roll { 0% {transform: rotateX( 0deg);} 1% {transform: rotateX( 0deg);} 2% {transform: rotateX(90deg); background: yellow;} 2.01% {transform: rotateX(90deg); background: blue;} 5% {transform: rotateX( 0deg); background: blue;} 6% {transform: rotateX(90deg); background: blue;} 6.01% {transform: rotateX(90deg); background: red;} 9% {transform: rotateX( 0deg); background: red;} 10% {transform: rotateX( 0deg); background: red;} 10.01%{transform: rotateY( 0deg);} 11% {transform: rotateY( 0deg); background: #CC0066;} 12% {transform: rotateY(90deg); background: #CC0066;} 12.01%{transform: rotateY(90deg); background: green;} 15% {transform: rotateY( 0deg); background: green;} 16% {transform: rotateY(90deg); background: green;} 16.01%{transform: rotateY(90deg); background: #FFFF00;} 19% {transform: rotateY( 0deg); background: #FFFF00;} 20% {transform: rotateY( 0deg); background: #FFFF00;} 20.01%{transform: rotateZ( 0deg);} 21% {transform: rotatez( 0deg); background: silver;} 22% {transform: rotatez(90deg); background: silver;} 22.01%{transform: rotatez(90deg); background: #0000FF;} 25% {transform: rotateZ( 0deg); background: #0000FF;} 26% {transform: rotatez(90deg); background: #0000FF;} 26.01%{transform: rotateZ(90deg); background: red;} 29% {transform: rotatez( 0deg); background: red;} 30% {transform: rotateZ( 0deg); background: red;} 30.01%{transform: rotateY( 0deg);} 31% {transform: rotateY( 0deg); background: #66FFFF;} 32% {transform: rotateY(90deg); background: #66FFFF;} 32.01%{transform: rotateX(180deg); background: lime;} 35% {transform: rotateX( 0deg); background: lime;} 36% {transform: rotateX(180deg); background: lime;} 36.01%{transform: rotateY(90deg); background: aqua;} 39% {transform: rotateY( 0deg); background: aqua;} 40% {transform: rotateY( 0deg); background: aqua;} 40.01%{transform: rotateZ( 0deg) scale(1,1);} 45% {transform: rotateZ(720deg) scale(0.7,0.7);background: orange;} 50% {transform: rotateZ(720deg) scale(1,1); background: orange;} 50.01%{transform: rotateZ( 0deg);} 51% {transform: rotateZ( 0deg) scale(0.7,0.7); border-radius:0px; background: purple;} 52% {transform: rotateZ(90deg) scale(0.5,0.5); border-radius:20px;background: purple;} 52.01%{transform: rotateZ(720deg) scale(0.7,0.7);border-radius:40px; background: blue;} 55% {transform: rotateZ( 0deg) scale(0.5,0.5);border-radius:50px; background: blue;} 56% {transform: rotateZ(180deg) scale(0.7,0.7);border-radius:40px; background: blue;} 56.01%{transform: rotateZ(90deg) scale(0.8,0.8);border-radius: 20px;background: yellow;} 58% {transform: rotateZ( 0deg) scale(1,1); border-radius: 20px;background: aqua;} 60% {transform: rotateZ( 0deg) scale(1,1); border-radius: 0px; background: yellow;} 60.01%{transform: rotateZ( 0deg) scale(1,1); background: #993333;} 61% {transform: rotateZ(90deg) scale(0.5,0.2) skewY (30deg); background: #993333;} 62% {transform: rotateZ(360deg) scale(1,1); background: #993333;} 62.01%{transform: rotateZ(360deg) scale(0.7,0.7); background: #66FF33;} 65% {transform: rotateZ(-180deg) scale(0.7,0.7); background: #66FF33;} 66% {transform: rotateZ(180deg) scale(0.7,0.7); background: #66FF33;} 66.01%{transform: rotateZ(-180deg) scale(0.9,1); background: blue;} 68% {transform: rotateZ(180deg) scale(0.8,1); background: blue;} 70% {transform: rotateZ( 0deg) scale(1,0.8); background: blue;} 70.01%{transform: rotateX( 0deg) scale(1,1); border-radius: 0px;} 74% {transform: rotateX( 0deg) scale(0.7,0.7);border-radius: 25px;background: #0000FF;} 78% {transform: rotateX(90deg) scale(0.2,0.2);border-radius: 25px;background: #0000FF;} 78.01%{transform: rotateX(180deg) scale(0.3,0.3);border-radius: 50px; background: #000000;} 80% {transform: rotateX( 0deg) scale(0.9,0.9);border-radius: 50px; background: #FF0000;} 86% {transform: rotateX(180deg) scale(0.7,0.7);border-radius: 50px; background: #000000;} 86.01%{transform: rotateX(90deg) scale(0.8,0.8);border-radius: 50px;background: #0000FF;} 88% {transform: rotateX( 0deg) scale(1,1); border-radius: 25px;background: #0000FF;} 90% {transform: rotateX( 0deg) scale(1,1); border-radius: 0px; background: #0000FF;} 91% {transform: rotateX(0deg) scale(0.6,0.6);border-radius: 0px; background: yellow;} 93% {transform: rotateX(0deg) scale(0.3,0.3);border-radius: 500px;background:red;} 95% {transform: rotateX(0deg) scale(0.0,0.0);border-radius: 50px; background: blue;} 98% {transform: rotateX(0deg) scale(10,1); border-radius: 25px; background: white;} 100% {transform: rotateX(0deg) scale(1,1); border-radius: 0px; background: gray;} } @media screen and (max-width: 730px) { .cont div { width: 75px; height: 75px; } } @media screen and (max-width: 480px) { .cont div { width: 50px; height: 50px; } }

A fast and colorful CSS transition animation
]]> https://thingography.com/css-transition-mix/feed/ 0