Found the simple code for a ball bounce, changed it, and used that to make out a soccer ball and a sports theme.
Hi there ladans37,
note that CSS animation no longer requires prefixes. 
Less coding, and more time to play with your balls. 
coothead
1 Like
@coothead I’ll take note of that and remove them 
1 Like
Done! What about the @-webkit…etc?
if you are referring to @-webkit-keyframes,
then that now becomes @keyframes
How do I know all this stuff, you may well ask,
and the answer is I don’t, but I do know someone
who does…
coothead
3 Likes
Right, makes sense . Yep I been to that website many times, it’s great.
You have -webkit- in yours 
This rolling effect for my soccer ball would be awesome.
You are being very a vert silly-billy now.
You know very well that this is code from the codepen
that you posted in this thread of yours…
I copied that codepen’s code in it’s entirety to help
resolve the SVG problems you were having with it.
Nothing to do with the CSS at all. .
coothead
1 Like
now am confused. What’s a rolling ball got to do with guitars?
doesn’t need prefixes
1 Like
Oh I see. Ok I just changed webkit-keyframes-bounce to keyframes-bounce . Sorry I missed that.
I have replied in some depth to your post
1 Like
Yeah I saw. It’s in your Pen that you fixed up for me, not in mine. I have removed the prefixes in mine…
That’s the one you did for me. Your Pen.
No it isn’t
No it isn’t
No it isn’t
This is the pen that you posted…
coothead
1 Like
Ok, right…so? Point being?
Anyone know how to add a shadow to a ball as it’s dropping?
Working on it, found some clues 
Having trouble where the shadow’s animation is slower than the ball’s.
.shadow {
background: #020;
width: 50px;
height: 37px;
position: absolute;
bottom: 48px;
left: 105px;
border-radius: 50px;
bottom: 0.5;
transform-origin: 50% 50%;
transform: scaleY(0.25);
animation: shadow-scale 2s 1;
animation-duration: 2s;
filter:blur(12px);
}
/*
// Grow and Shrink Shadow
*/
@keyframes shadow-scale{
0% {
transform: scale(1) scaleY(0.25);
}
40% {
transform: scale(1) scaleY(0.25);
}
65% {
transform: scale(1) scaleY(0.25);
}
82% {
transform: scale(1) scaleY(0.25);
}
92% {
transform: scale(1) scaleY(0.25);
}
/*
// Group animations together
// When the ball gets closer to the floor the shadow is smaller
// The shadow is larger the further the ball gets from the ground
*/
25%,
55%,
75%,
87%,
97%,
100% {
transform: scale(0.75) scaleY(0.25);
animation-timing-function: ease-out;
}
}
.bouncingball {
width:140px;
height:140px;
border-radius:100%;
background-image:url(https://i.ibb.co/ZS22388/soccer-ball-png-clip-art-soccer-ball-11563100954keemcoojya.png);
background-size:35%;
background-position:center;
background-repeat:no-repeat;
animation: bounce 2s 1 forwards;
transform: translateY(0px);
animation-iteration-count: 1;
position:absolute;
margin:50px;
margin-top:285px;
}
keyframes bounce {
0% {
top: 0;
animation-timing-function: ease-in;
}
16% {
top: 190px;
animation-timing-function: ease-out;
}
32% {
top: 50px;
animation-timing-function: ease-in;
}
48% {
top: 190px;
animation-timing-function: ease-out;
}
62% {
top: 100px;
animation-timing-function: ease-in;
}
78% {
top: 190px;
animation-timing-function: ease-out;
}
90% {
top: 150px;
animation-timing-function: ease-in;
}
100% {
top: 190px;
animation-timing-function: ease-out;
}
}
@-moz-keyframes bounce {
0% {
top: 0;
animation-timing-function: ease-in;
}
16% {
top: 190px;
animation-timing-function: ease-out;
}
32% {
top: 50px;
animation-timing-function: ease-in;
}
48% {
top: 190px;
animation-timing-function: ease-out;
}
62% {
top: 100px;
animation-timing-function: ease-in;
}
78% {
top: 190px;
animation-timing-function: ease-out;
}
90% {
top: 150px;
animation-timing-function: ease-in;
}
100% {
top: 190px;
animation-timing-function: ease-out;
}
}
<div class="bouncingball">
</div>
<div class="shadow"></div>
Hi there ladans37,
I will give you one solution and that’s it.
No comments, no explanations, no repartee just code…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<base href="https://i.ibb.co/">
<title>Animated ball</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
html, body {
height: 100%;
margin: 0;
}
body {
font: normal 1em / 1.62em sans-serif;
background-color: #010;
background-image:url( rMb3jQP/soccer.jpg );
background-repeat:no-repeat;
background-size: 100vw auto;
background-position: center;
}
#container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate( -50%, 0 );
}
#container div:nth-of-type(1) {
width: 8.75em;
height: 8.75em;
background-image: url( ZS22388/soccer-ball-png-clip-art-soccer-ball-11563100954keemcoojya.png );
background-size: 35% auto;
background-position: center;
background-repeat: no-repeat;
animation: bounce 2s 1 forwards;
transform: translateY(0);
animation-iteration-count: 1;
}
#container div:nth-of-type(2) {
width: 3.124em;
height: 2.25em;
margin-left: 3em;
border-radius: 3.124em;
transform-origin: 50% 50%;
transform: scaleY( 0.25 );
filter: blur( 0.75em );
background-color: #020;
animation: shadow-scale 2s 1;
animation-iteration-count: 1;
animation-delay: 0.12s;
}
@keyframes bounce {
0% {
margin: 0 0 190px;
animation-timing-function: ease-in;
}
16% {
margin: 190px 0 0;
animation-timing-function: ease-out;
}
32% {
margin: 50px 0 140px;
animation-timing-function: ease-in;
}
48% {
margin: 190px 0 0;
animation-timing-function: ease-out;
}
62% {
margin: 100px 0 90px;
animation-timing-function: ease-in;
}
78% {
margin: 190px 0 0;
animation-timing-function: ease-out;
}
90% {
margin: 150px 0 40px;
animation-timing-function: ease-in;
}
100% {
margin: 190px 0 0;
animation-timing-function: ease-out;
}
}
/* Grow and Shrink Shadow */
@keyframes shadow-scale {
0% {
transform: scale(1) scaleY(0.25);
}
40% {
transform: scale(1) scaleY(0.25);
}
65% {
transform: scale(1) scaleY(0.25);
}
82% {
transform: scale(1) scaleY(0.25);
}
/*
Group animations together
When the ball gets closer to the floor the shadow is smaller
The shadow is larger the further the ball gets from the ground
*/
25%,
55%,
75%,
87%,
97%,
100% {
transform: scale(0.75) scaleY(0.25);
animation-timing-function: ease-out;
}
}
@media ( max-width: 39em ) {
body {
background-size: 150vw auto;
}
}
@media ( max-width: 24em ) {
body {
background-size: 250vw auto;
}
}
</style>
</head>
<body>
<div id="container">
<div></div>
<div></div>
</div>
</body>
</html>coothead
1 Like