.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
]]>