.ani-box {
background: url(http://www.thingography.com/my-things/wp-content/uploads/css-img/b-ball/floor.png) no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
.court {
width: 100%;
height: 350px;
margin: 0 auto;
}
.ballbox, .bounce1, .bounce2 {
position: relative;
width: 33%;
height: 300px;
display: inline-block;
margin: 0 auto;
text-align: center;
}
.ballbox {margin-top: -500px; height: 800px;}
.ballbox img, .bounce1 img, .bounce2 img {
margin: 0 auto;
}
.bounce1 img {
animation: bouncing 2s linear infinite;
}
.bounce2 img {
animation: bouncing 2.4s linear infinite;
}
@keyframes bouncing {
0% {transform: translate(0px, 0px) rotate(0deg);}
25% {transform: translate(0px,200px) rotate(90deg);}
50% {transform: translate(0px, 0px) rotate(-90deg);}
75% {transform: translate(0px,200px) rotate(90deg);}
100% {transform: translate(0px, 0px) rotate(0deg);}
}
.ballbox img {
animation: b-ball 2.4s linear infinite;
}
@keyframes b-ball {
0% {transform: translate(0px, 0px) rotate(0deg) scale(1.5);}
25% {transform: translate(0px,200px) rotate(90deg) scale(.4);}
50% {transform: translate(0px, 0px) rotate(-90deg) scale(.2);}
75% {transform: translate(0px,200px) rotate(90deg) scale(.4);}
100% {transform: translate(0px, 0px) rotate(0deg) scale(1.5);}
}
.ballbox2, .ballbox3 {
width: 100%;
height: 300px;
position: relative;
}
.ballbox2 img {
animation: b-ball2 4s linear infinite;
}
.ballbox3 img {
animation: b-ball2 4s linear infinite;
animation-delay: 2s;
width: 250px;
height: 250px;
margin-left:-20%;
}
.ballbox3 {
margin-top: -300px;
z-index: 2;
}
@keyframes b-ball2 {
0% {transform: rotate(0deg) scale(1.5); margin-left:-40%;}
50% {transform: rotate(180deg) scale(.4); margin-left: 50%;}
100% {transform: rotate(360deg) scale(1.5); margin-left: 140%;}
}
This is a basic CSS animation show bouncing basket balls. Simple and straight forward demo using multiple images, including the background court floor.
]]>
