<div class="container">
<div class="wrapper">
<div class="ballons">
<div class="heart">
<span></span>
<span></span>
</div>
</div>
<div class="animal">
<div class="ears"></div>
<div class="body">
<div class="eyes"></div>
<div class="nose">
<span></span>
<span></span>
</div>
<div class="hands">
<div class="left_hand">
<span></span>
<span></span>
</div>
<div class="right_hand">
<span></span>
<span></span>
</div>
</div>
</div>
<div class="legs">
<span></span>
<span></span>
</div>
</div>
</div>
</div>body {
box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color:#f5f5f5;
}
.container {
width: 100%;
}
.wrapper {
max-width: 500px;
margin: 200px auto 0;
height: 200px;
border-bottom:10px solid #ddd;
position: relative;
}
.animal {
position: relative;
animation: animal 2s 1s infinite alternate;
-webkit-animation: animal 2s 1s infinite alternate;
-moz-animation: animal 2s 1s infinite alternate;
-ms-animation: animal 2s 1s infinite alternate;
-o-animation: animal 2s 1s infinite alternate;
}
/*body*/
.body {
background-color: #cccccc;
border: 2px solid #000;
width: 170px;
height: 170px;
border-radius: 30px;
margin: 0 auto;
position: relative;
}
.body:before {
content: "";
position: absolute;
left: 5px;
right: 5px;
bottom: 10px;
top: 0;
border-radius: 30px;
background-color: #ffffff;
}
/*Ears*/
.ears {
position: absolute;
top: 0;
left: 50%;
right: -10px;
height: 20px;
width: 180px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
.ears:before,
.ears:after {
content: "";
background-color: #000000;
width: 15px;
height: 30px;
float: left;
border-radius: 10px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
.ears:after {
float: right;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
/*Ballons*/
.ballons {
position: absolute;
left: 84.8%;
z-index: 99;
width: 150px;
height: 150px;
top: -70px;
animation: ballons 2s 1s infinite alternate;
-webkit-animation: ballons 2s 1s infinite alternate;
-moz-animation: ballons 2s 1s infinite alternate;
-ms-animation: ballons 2s 1s infinite alternate;
-o-animation: ballons 2s 1s infinite alternate;
transform: translateX(-50%) scale(1,1.1);
-webkit-transform: translateX(-50%) scale(1,1.1);
-moz-transform: translateX(-50%) scale(1,1.1);
-ms-transform: translateX(-50%) scale(1,1.1);
-o-transform: translateX(-50%) scale(1,1.1);
}
.ballons:before {
content: "";
position: absolute;
left: 20px;
top: 106px;
z-index: 99;
width: 2px;
height: 60px;
background: #000;
}
.ballons .heart {
position: relative;
animation: heart 2s 1s infinite alternate;
-webkit-animation: heart 2s 1s infinite alternate;
-moz-animation: heart 2s 1s infinite alternate;
-ms-animation: heart 2s 1s infinite alternate;
-o-animation: heart 2s 1s infinite alternate;
}
.ballons .heart span {
width: 60px;
height: 100px;
background: #ef4023;
position: absolute;
left: 5px;
top: 0;
border-radius: 50px 50px 0 0;
border-bottom: 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.ballons .heart span:last-child {
right: 113px;
left: initial;
transform: scale(-1,1) rotate(45deg);
-webkit-transform: scale(-1,1) rotate(45deg);
-moz-transform: scale(-1,1) rotate(45deg);
-ms-transform: scale(-1,1) rotate(45deg);
-o-transform: scale(-1,1) rotate(45deg);
}
/*Eyes*/
.eyes {
position: absolute;
left: 50%;
width: 130px;
top: 24px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
.eyes:before,
.eyes:after {
content: "";
background-color: #000;
width: 10px;
height: 10px;
border-radius: 50%;
float: right;
animation: eyes 2s 1s infinite alternate;
-webkit-animation: eyes 2s 1s infinite alternate;
-moz-animation: eyes 2s 1s infinite alternate;
-ms-animation: eyes 2s 1s infinite alternate;
-o-animation: eyes 2s 1s infinite alternate;
}
.eyes:after {
float: left;
}
/*nose*/
.nose {
position: absolute;
left: 50%;
top: 30px;
width: 20px;
height: 20px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
.nose:before {
content: "";
position: absolute;
left: 50%;
top: 7px;
bottom: 4px;
background-color: #938E8F;
z-index: 9;
width: 2px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
.nose:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
left: 50%;
border: 8px solid transparent;
border-top-color: #000000;
border-radius: 8px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
.nose span {
width: 6px;
height: 8px;
border: 2px solid #938E8F;
border-radius: 50%;
position: absolute;
left: 0;
bottom: 0;
transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.nose span:last-child {
right: 0;
left: inherit;
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
.nose span:before {
content: "";
background: #fff;
position: absolute;
left: -3px;
right: -3px;
bottom: 3px;
top: -3px;
}
/*Hands*/
.hands .left_hand {
position: absolute;
left: 5px;
top: 70px;
width: 35px;
height: 60px;
}
.hands .left_hand:before {
content: "";
position: absolute;
left: 0;
top: -10px;
right: 0;
background: #fff;
height: 13px;
z-index: 9;
}
.hands .left_hand:after {
content: "";
border: 2px solid #000;
position: absolute;
left: 5px;
right: 4px;
bottom: -18px;
height: 30px;
z-index: 0;
border-radius: 19px;
box-shadow: inset 25px 0 0 rgba(0,0,0,.2);
-webkit-box-shadow: inset 25px 0 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 25px 0 0 rgba(0,0,0,.2);
-ms-box-shadow: inset 25px 0 0 rgba(0,0,0,.2);
-o-box-shadow: inset 25px 0 0 rgba(0,0,0,.2);
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
}
.hands .left_hand span {
background-color: #fff;
border-left: 2px solid #000;
width: 15px;
height: 65px;
position: absolute;
border-radius: 50%;
left: 0;
top: 0;
}
.hands .left_hand span:before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
height: 5px;
}
.hands .left_hand span:after {
content: "";
background: #fff;
border-radius: 0 0 30px 30px;
position: absolute;
bottom: -6px;
left: 3.3px;
right: -11.5px;
height: 27px;
z-index: 9;
box-shadow: inset 4px 0 0 rgba(0,0,0,.2);
-webkit-box-shadow: inset 4px 0 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 4px 0 0 rgba(0,0,0,.2);
-ms-box-shadow: inset 4px 0 0 rgba(0,0,0,.2);
-o-box-shadow: inset 4px 0 0 rgba(0,0,0,.2);
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
}
.hands .left_hand span:last-child {
left: 25px;
top: -3px;
}
.hands .left_hand span:last-child:after {
display: none;
}
.hands .right_hand {
position: absolute;
right: -26px;
top: 70px;
width: 35px;
height: 60px;
animation: right_hand 2s 1s infinite alternate;
-webkit-animation: right_hand 2s 1s infinite alternate;
-moz-animation: right_hand 2s 1s infinite alternate;
-ms-animation: right_hand 2s 1s infinite alternate;
-o-animation: right_hand 2s 1s infinite alternate;
transform: rotate(-47deg);
-webkit-transform: rotate(-47deg);
-moz-transform: rotate(-47deg);
-ms-transform: rotate(-47deg);
-o-transform: rotate(-47deg);
}
.hands .right_hand:before {
content: "";
border: 2px solid #000;
width: 19.2px;
height: 30px;
position: absolute;
border-radius: 0 0 30px 30px;
bottom: -6px;
background: #f5f5f5;
z-index: 9;
right: 0px;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
}
.hands .right_hand:after {
content: "";
width: 19.5px;
height: 18px;
background-color: #fff;
position: absolute;
bottom: 10px;
z-index: 9;
right: 6.4px;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
}
.hands .right_hand span {
border-left: 2px solid #000;
width: 10px;
height: 40px;
position: absolute;
border-radius: 50%;
right: 0;
top: 0;
}
.hands .right_hand span:first-child:before {
content: "";
border: 2px solid #000;
position: absolute;
background-color: #fff;
right: -3px;
bottom: -26px;
width: 20px;
height: 16px;
z-index: 10;
border-radius: 15px 20px 20px 18px;
transform: rotate(57deg);
-webkit-transform: rotate(57deg);
-moz-transform: rotate(57deg);
-ms-transform: rotate(57deg);
-o-transform: rotate(57deg);
}
.hands .right_hand span:first-child:after {
content: "";
position: absolute;
bottom: -9px;
right: -4px;
width: 6px;
height: 9px;
border: 2px solid #000;
border-left: 0;
border-radius: 10px 30px 30px 10px;
z-index: 99;
background-color: #fff;
transform: rotate(-29deg);
-webkit-transform: rotate(-29deg);
-moz-transform: rotate(-29deg);
-ms-transform: rotate(-29deg);
-o-transform: rotate(-29deg);
}
.hands .right_hand span:last-child {
right: 20px;
top: 5px;
}
.hands .right_hand span:last-child:before {
content: "";
position: absolute;
left: 0;
right: 5px;
top: 0;
background-color: #fff;
height: 5px;
}
.hands .right_hand span:last-child:after {
content: "";
position: absolute;
left: 0px;
top: 2px;
width: 18.7px;
height: 35px;
background: #fff;
border-radius: 0 0 10px 10px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
/*Legs*/
.legs {
margin: 0 auto;
text-align: center;
height: 60px;
}
.legs span {
width: 10px;
height: 20px;
border-right: 2px solid #605d5e;
border-left: 2px solid #605d5e;
display: inline-block;
margin: 0 20px;
position: relative;
top: -8px;
z-index: -1;
animation: right_leg 2s 1s infinite alternate;
-webkit-animation: right_leg 2s 1s infinite alternate;
-moz-animation: right_leg 2s 1s infinite alternate;
-ms-animation: right_leg 2s 1s infinite alternate;
-o-animation: right_leg 2s 1s infinite alternate;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
}
.legs span:before {
content: "";
width: 25px;
height: 10px;
position: absolute;
border-radius: 0 20px 20px 20px;
border: 2px solid #000;
left: -2px;
bottom: -12px;
}
.legs span:after {
content: "";
background-color: #f5f5f5;
right: 0;
left: 0;
position: absolute;
bottom: -2px;
height: 7px;
}
.legs span:first-child {
animation: left_leg 2s 1s infinite alternate;
-webkit-animation: left_leg 2s 1s infinite alternate;
-moz-animation: left_leg 2s 1s infinite alternate;
-ms-animation: left_leg 2s 1s infinite alternate;
-o-animation: left_leg 2s 1s infinite alternate;
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
}
.legs span:first-child:before {
right: -2px;
left: inherit;
border-radius: 20px 0 20px 20px;
}
/*Heart*/
@keyframes heart {
0% {
transform:scale(.8);
-webkit-transform:scale(.8);
-moz-transform:scale(.8);
-ms-transform:scale(.8);
-o-transform:scale(.8);
top: 22px;
right: 11px;
}
to {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
top: -21px;
right: -11px;
}
}
-webkit-@keyframes heart {
0% {
transform:scale(.8);
-webkit-transform:scale(.8);
-moz-transform:scale(.8);
-ms-transform:scale(.8);
-o-transform:scale(.8);
top: 22px;
right: 11px;
}
to {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
top: -21px;
right: -11px;
}
}
-moz-@keyframes heart {
0% {
transform:scale(.8);
-webkit-transform:scale(.8);
-moz-transform:scale(.8);
-ms-transform:scale(.8);
-o-transform:scale(.8);
top: 22px;
right: 11px;
}
to {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
top: -21px;
right: -11px;
}
}
-ms-@keyframes heart {
0% {
transform:scale(.8);
-webkit-transform:scale(.8);
-moz-transform:scale(.8);
-ms-transform:scale(.8);
-o-transform:scale(.8);
top: 22px;
right: 11px;
}
to {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
top: -21px;
right: -11px;
}
}
-o-@keyframes heart {
0% {
transform:scale(.8);
-webkit-transform:scale(.8);
-moz-transform:scale(.8);
-ms-transform:scale(.8);
-o-transform:scale(.8);
top: 22px;
right: 11px;
}
to {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
top: -21px;
right: -11px;
}
}
/*Eyes*/
@keyframes eyes {
from {
width: 10px;
height: 10px;
}
to {
width: 15px;
height: 15px;
}
}
-webkit-@keyframes eyes {
from {
width: 10px;
height: 10px;
}
to {
width: 15px;
height: 15px;
}
}
-moz-@keyframes eyes {
from {
width: 10px;
height: 10px;
}
to {
width: 15px;
height: 15px;
}
}
-ms-@keyframes eyes {
from {
width: 10px;
height: 10px;
}
to {
width: 15px;
height: 15px;
}
}
-o-@keyframes eyes {
from {
width: 10px;
height: 10px;
}
to {
width: 15px;
height: 15px;
}
}
/*Ballons*/
@keyframes ballons {
from {
top: -70px;
}
to {
top: -180px
}
}
-webkit-@keyframes ballons {
from {
top: -70px;
}
to {
top: -180px
}
}
-moz-@keyframes ballons {
from {
top: -70px;
}
to {
top: -180px
}
}
-ms-@keyframes ballons {
from {
top: -70px;
}
to {
top: -180px
}
}
-o-@keyframes ballons {
from {
top: -70px;
}
to {
top: -180px
}
}
/*Animal*/
@keyframes animal {
from {
bottom: 0;
}
to {
bottom: 74px;
}
}
-webkit-@keyframes animal {
from {
bottom: 0;
}
to {
bottom: 74px;
}
}
-moz-@keyframes animal {
from {
bottom: 0;
}
to {
bottom: 74px;
}
}
-ms-@keyframes animal {
from {
bottom: 0;
}
to {
bottom: 74px;
}
}
-o-@keyframes animal {
from {
bottom: 0;
}
to {
bottom: 74px;
}
}
/*Right Hand*/
@keyframes right_hand {
from {
transform: rotate(-47deg);
-webkit-transform: rotate(-47deg);
-moz-transform: rotate(-47deg);
-ms-transform: rotate(-47deg);
-o-transform: rotate(-47deg);
top: 70px;
}
to {
transform: rotate(-80deg);
-webkit-transform: rotate(-80deg);
-moz-transform: rotate(-80deg);
-ms-transform: rotate(-80deg);
-o-transform: rotate(-80deg);
top: 50px;
}
}
-webkit-@keyframes right_hand {
from {
transform: rotate(-47deg);
-webkit-transform: rotate(-47deg);
-moz-transform: rotate(-47deg);
-ms-transform: rotate(-47deg);
-o-transform: rotate(-47deg);
top: 70px;
}
to {
transform: rotate(-80deg);
-webkit-transform: rotate(-80deg);
-moz-transform: rotate(-80deg);
-ms-transform: rotate(-80deg);
-o-transform: rotate(-80deg);
top: 50px;
}
}
-moz-@keyframes right_hand {
from {
transform: rotate(-47deg);
-webkit-transform: rotate(-47deg);
-moz-transform: rotate(-47deg);
-ms-transform: rotate(-47deg);
-o-transform: rotate(-47deg);
top: 70px;
}
to {
transform: rotate(-80deg);
-webkit-transform: rotate(-80deg);
-moz-transform: rotate(-80deg);
-ms-transform: rotate(-80deg);
-o-transform: rotate(-80deg);
top: 50px;
}
}
-ms-@keyframes right_hand {
from {
transform: rotate(-47deg);
-webkit-transform: rotate(-47deg);
-moz-transform: rotate(-47deg);
-ms-transform: rotate(-47deg);
-o-transform: rotate(-47deg);
top: 70px;
}
to {
transform: rotate(-80deg);
-webkit-transform: rotate(-80deg);
-moz-transform: rotate(-80deg);
-ms-transform: rotate(-80deg);
-o-transform: rotate(-80deg);
top: 50px;
}
}
-o-@keyframes right_hand {
from {
transform: rotate(-47deg);
-webkit-transform: rotate(-47deg);
-moz-transform: rotate(-47deg);
-ms-transform: rotate(-47deg);
-o-transform: rotate(-47deg);
top: 70px;
}
to {
transform: rotate(-80deg);
-webkit-transform: rotate(-80deg);
-moz-transform: rotate(-80deg);
-ms-transform: rotate(-80deg);
-o-transform: rotate(-80deg);
top: 50px;
}
}
/*Left Leg*/
@keyframes left_leg {
0% {
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
}
100% {
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
}
}
-webkit-@keyframes left_leg {
0% {
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
}
100% {
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
}
}
-moz-@keyframes left_leg {
0% {
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
}
100% {
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
}
}
-ms-@keyframes left_leg {
0% {
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
}
100% {
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
}
}
-o-@keyframes left_leg {
0% {
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
}
100% {
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
}
}
/*Right Leg*/
@keyframes right_leg {
0% {
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
}
100% {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
}
-webkit-@keyframes right_leg {
0% {
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
}
100% {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
}
-moz-@keyframes right_leg {
0% {
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
}
100% {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
}
-ms-@keyframes right_leg {
0% {
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
}
100% {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
}
-o-@keyframes right_leg {
0% {
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
}
100% {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.