, is often used to group HTML elements and then style them by using CSS. Animation is a graphic element with visual effects to make it more attractive. In HTML and CSS, we usually name this element
. This article will explain how CSS binds animations to division elements.
Use keyframe method to define 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>
The Chinese translation of
Explanation
is:
Explanation
HTML code uses the division element with class "container" for animation. The animation, defined in the @keyframes rule, moves the element from 0 pixels to the right to 100 pixels, and then to the right to 200 pixels, in an alternating loop.
The CSS code defines a "container" class with a width of 50% of the viewport, a height of 10% of the viewport, and a purple background color. Apply the animation to the element using the 'animation' property with the value 'myAnimation 2s infinite alternating'. The div element is contained within the HTML body and animation will be applied when viewed in a web browser.
Use clipping path
If you understand the previous example, you must have found that making a very complex animation is quite difficult because it requires us to manually write so many lines of code. So there are many other tools we can use to achieve great animation effects. One such example is using clipping paths.
clip-path is a CSS property that allows you to specify a specific area of an element to be displayed (clipped) while hiding the rest of the element.
We can define areas by clipping paths, which can be created using basic shapes such as circles, rectangles, polygons, or SVG paths.
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>
The Chinese translation of
Explanation
is:
Explanation
Here, the HTML document uses a flex container to display child elements, centered horizontally and vertically. The body element has a height of 100vh and the .container class has a circular clipping mask and hover transition effect.
The .container class has a background color, width, padding and text alignment, a border radius of 20px, and a clip-path property that creates a circular mask. The hover pseudo-class changes the size of the clip-path with a 1s transition effect.
To explore this topic further, we recommend you read the following tutorial to learn more about the topic -
https://www.tutorialspoint.com/css/css_clip.htm
in conclusion
In this article, we learned how to bind animations to div elements using CSS. We have an exclusive look at using the keyframe method to do the same thing. We can customize the properties of the animation, such as duration, delay, behavior, etc.