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
How to define the shape of the corners is animatable using CSS?
The CSS border-radius property can be animated to create smooth transitions between different corner shapes. This technique allows you to transform elements from sharp corners to rounded or circular shapes when users interact with them.
Syntax
selector {
border-radius: initial-value;
transition: border-radius duration;
}
selector:hover {
border-radius: final-value;
}
Approach
To create animatable corner shapes, follow these steps
Create an HTML element and assign it a class name
Set the initial
border-radiusvalue (usually 0% for sharp corners)Add a
transitionproperty to animate the border-radius changesUse pseudo-classes like
:hoverto define the final border-radius value
Example: Square to Circle Animation
The following example demonstrates how to animate a square element into a circle on hover
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 150px;
background-color: #3498db;
border-radius: 0%;
transition: border-radius 0.5s ease;
margin: 20px;
}
.box:hover {
border-radius: 50%;
}
</style>
</head>
<body>
<h3>Hover over the box to see the animation</h3>
<div class="box"></div>
</body>
</html>
A blue square box appears that smoothly transforms into a circle when you hover over it, then returns to a square when you move the cursor away.
Example: Multiple Corner Animations
You can also animate individual corners for more complex effects
<!DOCTYPE html>
<html>
<head>
<style>
.fancy-box {
width: 200px;
height: 120px;
background: linear-gradient(45deg, #e74c3c, #f39c12);
border-radius: 0;
transition: border-radius 0.8s ease-in-out;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.fancy-box:hover {
border-radius: 30px 60px 15px 45px;
}
</style>
</head>
<body>
<h3>Custom corner animation</h3>
<div class="fancy-box">Hover Me</div>
</body>
</html>
A rectangular gradient box with "Hover Me" text that animates to have uniquely rounded corners (different radius for each corner) when hovered.
Key Properties
| Property | Purpose | Values |
|---|---|---|
border-radius |
Defines corner roundness | px, %, em values |
transition |
Controls animation timing | duration, easing function |
:hover |
Triggers animation on mouse over | CSS selector |
Conclusion
Animating corner shapes with CSS provides an elegant way to enhance user interaction. By combining border-radius with transition properties, you can create smooth, engaging animations that improve the visual appeal of your web interfaces.
197 Views
