.ani-box {
width:100%; height: 700px; position: relative;
background-color: #C0C0C0;
background: url("http://thingography.com/my-things/wp-content/uploads/css-img/wrong-place/courset.jpg") no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
#prop {
position: relative;
top: 50%;
left: 50%;
margin-top: 0;
margin-left: -70px;
}
.club img {
width: 211px;
height: 186px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -20px;
animation: swing 10s infinite;
animation-delay: 3s;
transform-origin: 0 0;
}
@keyframes swing {
0% {transform: rotateX(0deg);}
10% {transform: rotateX(0deg);}
21% {transform: rotateX(-100deg);}
35% {transform: rotateX(205deg);}
65% {transform: rotateX(0deg);}
100%{transform: rotateX(0deg);}
}
#g-ball {
top: 50%;
left: 50%;
position: absolute;
margin-top: 107px;
margin-left: 0;
animation: g-ball 10s linear infinite;
animation-delay: 1.75s;
}
@keyframes g-ball {
0% {transform:scale(1,1);}
25% {transform:scale(1,1);}
37% {transform:scale(1,1);}
50% {transform:scale(5,5);}
100% {transform:scale(5,5) translateY(400px);}
}
.gcourse {
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.shattered {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -2;
animation: shatter 10s infinite;
animation-delay: 1.85s;
}
.shattered img, .gcourse img {
width: 100%;
height: 100%;
}
@keyframes shatter {
0% {z-index: -2;}
45% {z-index: -2;}
50% {z-index: 10;}
100% {z-index: 10;}
}
Being in the wrong place at the wrong time
]]>
