Why Animate?
Animation adds an extra level of interaction to a web page. With CSS, you can apply animation properties to any element on a web page and make it do what you want. In this article, I'll create a basketball and make it move to simulate a bouncing object using CSS.
First Step
To start things off, we need to create our markup in HTML. The content of the body tag will contain the following:
<div class="area">
<div class="ball">
</div>
</div>
The first division tag with a class of area contains all of the parts that make up our basketball. If you don't know what basketball is, I suggest you watch this YouTube video😁. The ball class is meant to simulate a round object, I've used a background image of a basketball that has been cropped perfectly to fit inside the circle.
Here is the CSS code applied to the ball class:
.ball{
border-radius: 50%;
background: url('images/basketball.png');
background-size: contain;
padding: 0;
position: relative;
width: 150px;
height: 150px;
}
Second Step
In order to animate something with CSS, we use the keyframes keyword which looks like this:
@keyframes animation-name{
0%{
}
50%{
}
100%{
}
}
The animation-name can be defined to be anything that is suitable. The percentages inside the curly brackets represent the different times that something happens within one movement. The movements are executed in the order of percentage rate from 0 to 100.
For this particular ball, the keyframe looks like this:
@keyframes bounce{
0%{
margin-top: 0px;
}
50%{
margin-top: 50px;
transform: scaleX(0.8);
}
75%{
margin-top: 150px;
}
100%{
margin-top: 350px;
transform: scaleY(0.6);
box-shadow: 0px 50px 20px black;
}
}
Applying Animations
The keyframes object only defines the sequence of the animation. In order to make it functional, there is a property called animation that can be placed inside any CSS class. For this particular example, placing the following code inside the ball class will activate the animation movements:
animation-name: bounce;
animation-duration: 0.9s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-fill-mode: none;
Alternatively, you can use the animation shorthand property which addresses each of the 7 properties. The syntax of the animation shorthand property looks like this: animation: name duration timing-function delay iteration-count direction fill-mode;. For this particular example, we'd write it like this:
animation: bounce 0.9s ease-in-out 0s infinite alternate-reverse none;
Animation Properties
For a more thorough understanding of the properties that are accessible for animating, we can refer to the list below:
| Property | Values | Definition |
|---|---|---|
animation-name |
keyframe object | Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation |
animation-duration |
Time (e.g. 1s or 20ms) | Defines the length of time that an animation takes to complete one cycle |
animation-timing-function |
ease-in-out, ease-in, ease-out, ease | Describes how the animation will progress over one cycle of its duration |
animation-delay |
Time (e.g. 1s) | Defines when the animation will start |
animation-iteration-count |
e.g. infinite | Defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once. |
animation-direction |
e.g. alternate | Defines whether or not the animation should play in reverse on alternate cycles. |
animation-fill-mode |
e.g. forwards | Defines what values are applied by the animation outside the time it is executing. |
Wrapping Up
I recently discovered that it is also possible to apply animations using JavaScript. The syntax looks like this:
var element = document.getElementById('element');
element.animate([
{marginTop: 0px},
{marginTop: 50px, transform: scaleX(0.8)},
{marginTop: 150px},
{marginTop: 350px, transform: scaleY(0.6), boxShadow: 0px 50px 20px black},
], {
duration: 0.9, //milliseconds
easing: 'ease-in-out', // linear, a bezier curve etc.
delay: 0, // milliseconds
iterations: Infinity, // or any number
direction: 'alternate-reverse', // normal, reverse, etc.
fill: 'none' // backwards, both, forwards, auto
});
Applying this JavaScript method will play the same animation that we defined earlier with CSS or override any existing animations. Note that there is no need to use the animation-name property when using JavaScript.
I found myself recently dependent on CSS animations for a project which is why I decided to write this article. I hope it helps someone out there to increase their knowledge of CSS animations or even get comfortable using them. You're welcome to read my other article about HTML. Feel free to give me feedback through this link.
