Table of contents
No headings in the article.
I created a bouncing ball using CSS animation. The CSS animation function I will use here is the
- keyframes.
- Transform.
- TranslateY.
Creating this bouncing ball requires us to use CSS animation. CSS animation allows us to change the style's on the element as many times as we like. Let's say we want to change the size of a circle from let us say 50% to 100% at a particular time, We deploy the @keyframe rule to enable us to have these effects. Before that, let's create the HTML that we will use. I created an HTML with a "div" element to help me manipulate the styles as much as I want.
<html>
<title>css design</title>
<link rel="stylesheet" type="text/css" href="design.css">
</html>
<body>
<div class="page"></div>
<div class="page1"><div class="page2"></div>
<div class="page3"></div>
</div>
</body>
My HTML is ready to be used. Now let's go back to CSS. I will create my CSS.
background-color: rgb(140, 7, 218);
height: 100px;
width: 100px;
border-radius: 50%;
position: relative;
top: -120px;
left: 700px;
animation: bounce 0.7s infinite;
Animation works well with both transition and keyframes. I have set my animation to bounce 0.7 seconds, after every 0.7 seconds's the bouncing will occur again infinitely(The process will repeat itself without stopping forever).
@keyframes, What are keyframes,
Keyframes specify what animation will take place at what particular time, according to our liking. At this point, I will not use much of transition. Let's have a look at my @keyframe specifications.
@keyframes bounce{
15%{
height: 40px;
width: 80px;
}
30%{
height: 60px;
width: 60px
}
45%{
height: 50px;
width: 77px;
transform: translateY(280px)
}
60%{
height: 50px;
width: 77px;
}
100%{
transform: translateY(0px);
}
Keyframes, Enable us to specify the CSS design we want on the element.
At 15%, I specified my bounce to have a height of 40px and a width of 80px. 30% I set the height to 60px and width of 60px. At 45%, I set the height to 50px and width of 77px . I want my bouncing ball to change from a Dogface to a Catface, I will specify my transformation using translationY at 280px. Translation changes the element from Horizontally to Vertically using the function. This transformation is characterized by a 2D-dimensional vector, with coordinates that define how much of the element would move in each direction on the 2D plane. Translation majorly uses the Percentage and length to specify what we want. The good thing with translation is that it is supported by most of the major browsers we know.
At 60%, I have my width at 77px and height at 50px, without any transformation. We wrap it up with the transformation at 100%.
Thank you for reading. Do come again for more of such articles. Twitter @theugsteve.