Table of Contents
Learn Animation using HTML and CSS with this simple Tutorial
Building an animation using HTML and CSS includes Keyframes animation. In this article, you will learn how to use animations on your web page through this simple project. You will get an overview of different elements in animation. This article will explain pure CSS without any Javascript code or GIFs.
If you are new to CSS and animations, this article will help you.
Follow this video for complete guidance :
Let’s have a look.
Animation in CSS
Animation has become a main part of web design to enhance user experience and make engaging websites. CSS provides various properties from simple to complex styles to include animations in your websites.
Animation in CSS allows any element to show changes in style without using Javascript.
@keyframes in CSS
To use animation in CSS, you need to use keyframes. Keyframes will specify what sort of animation an element will hold at a time. When we write CSS code inside keyframes, the animation will change from current to new styles.
Properties used in this Animation
- animation-name: This property defines the name of the @keyframes animation.
- animation-duration: This property defines how long an animation should take to complete. The default value is set to 0 seconds.
- animation-iteration-count: This property defines the number of times an animation should run.
- animation-direction: This property defines whether an animation should be played forward, backwards or alternately.
- animation-fill-mode: This property defines a style for the element when the animation is not in use.
You may also like our content on Building Color Generator using HTML, CSS & JS.HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mario kart animation</title>
<link rel="stylesheet" type="text/css" href="mario.css" />
</head>
<body>
<div class="sky">
<img class="cloud" src="cloud.png">
<img class="cloud" src="cloud.png">
</div>
<div class="grass"></div>
<div class="road">
<div class="lines"></div>
<img class="mario" src="mario.png" alt="mario">
<img class ="luigi" src="luigi.png" alt="">
</div>
</body>
</html>CSS Code
html,body{
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
}
.grass, .sky, .road{
position: relative;
}
.sky{
height: 40%;
background: skyblue;
}
.grass{
height: 30%;
background: seagreen;
}
.road{
height: 30%;
background: dimgray;
box-sizing: border-box;
border-top: 10px solid grey;
border-bottom: 10px solid grey;
width: 100%;
}
.lines{
box-sizing: border-box;
border: 4px dashed #fff;
width: 100%;
position: absolute;
top: 45%;
}
/* elements to animate */
.mario{
position: absolute;
top: -60px;
left: 0px;
animation: drive 3s both infinite linear,
jump 0.3s 1.2s ease ;}
.luigi{
position: absolute;
top: 40px;
left: 0;
animation-name: drive;
animation-duration: 5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-direction: reverse;
}
.cloud{
position: absolute;
}
.cloud:nth-child(1){
width: 200px;
top: 100px;
opacity: 0.5;
animation: wind 80s linear infinite reverse;
}
.cloud:nth-child(2){
width: 300px;
top: 0;
animation: wind 50s linear infinite reverse;
}
@keyframes drive{
from{transform: translateX(0)}
to{ transform: translate(1200px)}
}
@keyframes wind{
from{left:-300px}
to{left:100%}
}
@keyframes jump{
0%{ top: -60px}
50%{ top: -100px}
100%{ top: -60px}
}Conclusion
CSS animation can enhance your website experience. CSS animations are simple to use as they do not require any library or other javascript functions. Exploring CSS animations, and experimenting with different properties, durations, and timing functions to discover what works best for your projects can help you in developing basic skills in CSS animation. With the above-given codes, you can build animation using HTML and CSS and gain skills.
Happy Learning!
Follow us on Facebook for more such articles.
