Moving Ball Animation Html And CSS: Source Code And Video Demonstration

Moving Ball Animation Html And CSS

The simple moving ball animation above is created with pure CSS. The HTML consists of a single div element. In the CSS code, a BORDER-RADIUS of 90 pixels is applied to the div to create a circle. Other declarations in the DIV rule specify a starting COLOR, width, height, RELATIVE POSITIONING, name of the animation, and duration(length of time for the complete animation to take place)

The @keyframes rule is used to gradually move the ball and change the color at the locations that we specified at each interval of 0%, 25%, 50%, 75%, and 100%. NOTE: the @keyframes rule is duplicated and a -webkit- prefix is added so the animation will work in newer versions of Chrome, Safari, and Opera. The same thing has to be done with both the animation-name and animation-duration declarations. Refer to the source code comments for more information.

Make sure to play around with the CSS for slower or faster animation-duration, different locations, colors, size, and shape of the div with the border-radius property. To display a square instead of a circle, just remove the border-radius property completely. Doing this will leave you with a 100-pixel by 100-pixel square.

Source Code


<!doctype html>
<html>
<head>
<title>colorful ball glide</title>

<style>
div {
background-color: red;
width: 100px;
height: 100px;
border-radius: 90px;
position: relative;
animation-name: ball-glide;
animation-duration: 8s;
/* BELOW ARE THE DUPLICATED ANIMATION DECLARATIONS WITH THE -WEBKIT- PREFIX ADDED */
-webkit-animation-name: ball-glide;
-webkit-animation-duration: 8s;
}

/* BELOW IS THE STANDARD SYNTAX FOR THE ANIMATION */
@keyframes ball-glide {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:gold; left:500px; top:0px;}
50% {background-color:rebeccapurple; left:500px; top:500px;}
75% {background-color:mediumblue; left:0px; top:500px;}
100% {background-color:red; left:0px; top:0px;}
}

/* BELOW IS THE DUPLICATED @KEYFRAMES RULE WITH THE -WEBKIT- PREFIX ADDED */
@-webkit-keyframes ball-glide {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:gold; left:500px; top:0px;}
50% {background-color:rebeccapurple; left:500px; top:500px;}
75% {background-color:mediumblue; left:0px; top:500px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>

<body>
<div></div>

</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: