Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to bind an animation to a division element using CSS?
Division Element as know as <div> is normally used for grouping the HTML element and then by using CSS we style them. An animation is a graphical element with visual effects to make it much more attractive. In HTML and CSS, we commonly name the element as <div>. This article will explain how CSS binds animations to the division elements.
Use The keyframes Method To Define The Animation
The keyframe method is the most commonly used method to create animation effects in CSS.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
width: 50vw;
height: 10vh;
background-color: rgb(103, 28, 141);
animation: myAnimation 2s infinite alternate;
}
@keyframes myAnimation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(200px);
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Explanation
The HTML code animates a division element with the class "container". Animation is defined in the @keyframes rule and moves the element from 0 to 100 pixels right and then back to 200 pixels right in an alternating loop.
The CSS code defines the "container" class with a width of 50% of the viewport, 10% of the viewport height, and a shade of purple background color. Animation is applied to the element using the "animation" property with a value of "myAnimation 2s infinite alternate". The division element is included in the HTML body, and the animation will be applied when viewed in a web browser.
Use clip-path
If you understood the previous example, you must have observed that it is quite difficult to produce a very complex animation since it requires us to manually write so many lines of code. We can therefore use many other tools to achieve awesome animation effects. One such example is to use a clip-path.
clip-path is a CSS property that allows you to specify a specific region of an element to be displayed (clipped) while hiding the rest of the element.
We can define the region by a clipping path, which can be created using a basic shape, such as a circle, rectangle, polygon, or SVG path.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: rgb(220, 221, 158);
width: 50vw;
padding: 20px;
text-align: justify;
border-radius: 20px;
clip-path: circle(23.2% at 100%);
}
.container:hover {
clip-path: circle(141% at 100%);
transition: 1s;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello world</h1>
<p>This is the body of the text</p>
</div>
</body>
</html>
Explanation
Here, the HTML document is set up with a flex container that displays child elements in a row, centered horizontally and vertically. The body has a height of 100vh, and the .container class has a circular clipping mask with a hover transition effect.
The .container class has a background color, width, padding, and text alignment, with a border radius of 20px and a clip-path property that creates a circular mask. The hover pseudo-class changes the clip-path size with a transition effect of 1s.
To explore more about the topic more, we recommend going through the following tutorial to understand the topic more −
https://www.tutorialspoint.com/css/css_clip.htmConclusion
In this article, we understood how to bind an animation to a div element using CSS. We exclusively saw the usage of the keyframe method to perform the same. We can customize the properties of the animations like duration, delay, behavior, etc.
335 Views
