Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Perform Animation on CSS clip property
The CSS clip property can be animated to create dynamic visual effects by changing the visible portion of an absolutely positioned element over time. This allows you to create revealing, masking, or cropping animations.
Syntax
selector {
clip: rect(top, right, bottom, left);
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
percentage {
clip: rect(top, right, bottom, left);
}
}
Important Notes
The clip property only works on absolutely positioned elements and uses the rect() function to define a rectangular clipping area. The values represent distances from the top−left corner of the element.
Example
The following example demonstrates animating the clip property to create a revealing effect −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 300px;
background: yellow;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
clip: rect(0, 100px, 50px, 0);
}
@keyframes myanim {
20% {
bottom: 100px;
clip: rect(0, 150px, 40px, 0);
}
}
h2 {
margin-bottom: 150px;
}
</style>
</head>
<body>
<h2>Performing Animation on clip property</h2>
<div></div>
</body>
</html>
A yellow rectangle with a red border appears, with only a portion visible due to clipping. The element animates by moving vertically and changing its clipped area, creating a dynamic revealing effect that repeats every 3 seconds.
Key Points
- The element must have
position: absoluteorposition: fixed -
rect()values are: top, right, bottom, left margins from the element's edges - Animation smoothly transitions between different clipping areas
- Combine with position changes for more complex effects
Conclusion
Animating the clip property creates engaging visual effects by dynamically changing which portion of an element is visible. This technique is useful for creating reveal animations, progress indicators, and creative masking effects.
188 Views
