{"id":2034,"date":"2018-03-14T02:02:36","date_gmt":"2018-03-14T02:02:36","guid":{"rendered":"http:\/\/thingography.com\/?p=2034"},"modified":"2018-11-06T14:10:38","modified_gmt":"2018-11-06T14:10:38","slug":"css-transition-mix","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-transition-mix\/","title":{"rendered":"Transition Mix Pure CSS Animation"},"content":{"rendered":"<style>\n.ani-box {width: 100%; height: 700px; overflow:hidden; margin-top 0;}\n.cont {\n\tmargin: 0 auto;\n\twidth: 90%;\n\theight: auto;\n\tposition: relative;\n}\n.cont div {\n\twidth: 100px;\n\theight: 100px;\n\tborder-radius: 0px;\n\tbackground-color: yellow;\n\tanimation: roll 50s linear infinite;\n\tdisplay: inline-block;\n\tmargin-right: auto;\n\tmargin-left: auto;\n}\n@keyframes roll {\n0%    {transform: rotateX( 0deg);}\n1%    {transform: rotateX( 0deg);}\n2%    {transform: rotateX(90deg); background: yellow;}\n2.01% {transform: rotateX(90deg); background: blue;}\n5%    {transform: rotateX( 0deg); background: blue;}\n6%    {transform: rotateX(90deg); background: blue;}\n6.01% {transform: rotateX(90deg); background: red;}\n9%    {transform: rotateX( 0deg); background: red;}\n10%   {transform: rotateX( 0deg); background: red;}\n10.01%{transform: rotateY( 0deg);}\n11%   {transform: rotateY( 0deg); background: #CC0066;}\n12%   {transform: rotateY(90deg); background: #CC0066;}\n12.01%{transform: rotateY(90deg); background: green;}\n15%   {transform: rotateY( 0deg); background: green;}\n16%   {transform: rotateY(90deg); background: green;}\n16.01%{transform: rotateY(90deg); background: #FFFF00;}\n19%   {transform: rotateY( 0deg); background: #FFFF00;}\n20%   {transform: rotateY( 0deg); background: #FFFF00;}\n20.01%{transform: rotateZ( 0deg);}\n21%   {transform: rotatez( 0deg); background: silver;}\n22%   {transform: rotatez(90deg); background: silver;}\n22.01%{transform: rotatez(90deg); background: #0000FF;}\n25%   {transform: rotateZ( 0deg); background: #0000FF;}\n26%   {transform: rotatez(90deg); background: #0000FF;}\n26.01%{transform: rotateZ(90deg); background: red;}\n29%   {transform: rotatez( 0deg); background: red;}\n30%   {transform: rotateZ( 0deg); background: red;}\n30.01%{transform: rotateY( 0deg);}\n31%   {transform: rotateY( 0deg); background: #66FFFF;}\n32%   {transform: rotateY(90deg); background: #66FFFF;}\n32.01%{transform: rotateX(180deg); background: lime;}\n35%   {transform: rotateX(  0deg); background: lime;}\n36%   {transform: rotateX(180deg); background: lime;}\n36.01%{transform: rotateY(90deg); background: aqua;}\n39%   {transform: rotateY( 0deg); background: aqua;}\n40%   {transform: rotateY( 0deg); background: aqua;}\n40.01%{transform: rotateZ( 0deg)  scale(1,1);} \n45%   {transform: rotateZ(720deg) scale(0.7,0.7);background: orange;}\n50%   {transform: rotateZ(720deg) scale(1,1);    background: orange;}\n50.01%{transform: rotateZ( 0deg);}\n51%   {transform: rotateZ( 0deg) scale(0.7,0.7); border-radius:0px; background: purple;}\n52%   {transform: rotateZ(90deg) scale(0.5,0.5); border-radius:20px;background: purple;}\n52.01%{transform: rotateZ(720deg) scale(0.7,0.7);border-radius:40px; background: blue;}\n55%   {transform: rotateZ(  0deg) scale(0.5,0.5);border-radius:50px; background: blue;}\n56%   {transform: rotateZ(180deg) scale(0.7,0.7);border-radius:40px; background: blue;}\n56.01%{transform: rotateZ(90deg) scale(0.8,0.8);border-radius: 20px;background: yellow;}\n58%   {transform: rotateZ( 0deg) scale(1,1);    border-radius: 20px;background: aqua;}\n60%   {transform: rotateZ( 0deg) scale(1,1);    border-radius: 0px; background: yellow;}\n60.01%{transform: rotateZ( 0deg)  scale(1,1);  background: #993333;}\n61%   {transform: rotateZ(90deg)  scale(0.5,0.2) skewY (30deg);  background: #993333;}\n62%   {transform: rotateZ(360deg) scale(1,1);  background: #993333;}\n62.01%{transform: rotateZ(360deg)  scale(0.7,0.7); background: #66FF33;}\n65%   {transform: rotateZ(-180deg) scale(0.7,0.7); background: #66FF33;}\n66%   {transform: rotateZ(180deg)  scale(0.7,0.7); background: #66FF33;}\n66.01%{transform: rotateZ(-180deg) scale(0.9,1); background: blue;}\n68%   {transform: rotateZ(180deg)  scale(0.8,1); background: blue;}\n70%   {transform: rotateZ( 0deg)   scale(1,0.8); background: blue;}\n70.01%{transform: rotateX( 0deg) scale(1,1);    border-radius: 0px;}\n74%   {transform: rotateX( 0deg) scale(0.7,0.7);border-radius: 25px;background: #0000FF;}\n78%   {transform: rotateX(90deg) scale(0.2,0.2);border-radius: 25px;background: #0000FF;}\n78.01%{transform: rotateX(180deg) scale(0.3,0.3);border-radius: 50px; background: #000000;}\n80%   {transform: rotateX(  0deg) scale(0.9,0.9);border-radius: 50px; background: #FF0000;}\n86%   {transform: rotateX(180deg) scale(0.7,0.7);border-radius: 50px; background: #000000;}\n86.01%{transform: rotateX(90deg) scale(0.8,0.8);border-radius: 50px;background: #0000FF;}\n88%   {transform: rotateX( 0deg) scale(1,1);    border-radius: 25px;background: #0000FF;}\n90%   {transform: rotateX( 0deg) scale(1,1);    border-radius: 0px; background: #0000FF;}\n91%   {transform: rotateX(0deg) scale(0.6,0.6);border-radius: 0px;  background: yellow;}\n93%   {transform: rotateX(0deg) scale(0.3,0.3);border-radius: 500px;background:red;}\n95%   {transform: rotateX(0deg) scale(0.0,0.0);border-radius: 50px; background: blue;}\n98%   {transform: rotateX(0deg) scale(10,1);   border-radius: 25px; background: white;}\n100%  {transform: rotateX(0deg) scale(1,1);    border-radius: 0px;  background: gray;}\n}\n@media screen and (max-width: 730px) {\n\t.cont div {\n\t\twidth: 75px;\n\t\theight: 75px;\n\t}\n}\n@media screen and (max-width: 480px) {\n\t.cont div {\n\t\twidth: 50px;\n\t\theight: 50px;\n\t}\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"cont\">\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<\/div>\n<\/div>\n<p> <!-- Ani  --><\/p>\n<div class=\"below-ani\">A fast and colorful CSS transition animation<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A fast and colorful CSS transition animation<\/p>\n","protected":false},"author":2,"featured_media":2617,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,16,200],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2034"}],"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=2034"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2034\/revisions"}],"predecessor-version":[{"id":2631,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2034\/revisions\/2631"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2617"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}