ball – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:46:05 +0000 en-US hourly 1 B-Ball CSS Animation https://thingography.com/css-b-ball/ https://thingography.com/css-b-ball/#respond Sun, 18 Feb 2018 18:43:41 +0000 http://thingography.com/my-things/?p=59 .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%;} }
b-ball2
b-ball2

This is a basic CSS animation show bouncing basket balls. Simple and straight forward demo using multiple images, including the background court floor.

]]> https://thingography.com/css-b-ball/feed/ 0