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
Selected Reading
Perform Animation on CSS padding-top property
The CSS padding-top property can be animated using CSS animations or transitions. This creates smooth visual effects where the top padding of an element gradually changes over time.
Syntax
@keyframes animation-name {
from { padding-top: initial-value; }
to { padding-top: final-value; }
}
selector {
animation: animation-name duration timing-function iteration-count;
}
Example: Animating padding-top Property
The following example demonstrates how to animate the padding-top property using CSS keyframes −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 100px;
border: 3px solid maroon;
background-color: #f0f0f0;
animation: paddingAnimation 3s infinite;
display: flex;
align-items: flex-start;
justify-content: center;
font-family: Arial, sans-serif;
}
.content {
background-color: #4CAF50;
color: white;
padding: 10px;
border-radius: 5px;
}
@keyframes paddingAnimation {
0% {
padding-top: 10px;
}
50% {
padding-top: 60px;
}
100% {
padding-top: 10px;
}
}
</style>
</head>
<body>
<h2>CSS padding-top Animation</h2>
<div class="container">
<div class="content">Content</div>
</div>
</body>
</html>
A container with a maroon border appears. Inside it, a green box with "Content" text smoothly moves up and down as the container's top padding animates from 10px to 60px and back, creating a bouncing effect that repeats infinitely every 3 seconds.
Example: Using Transition for Hover Effect
You can also animate padding-top using CSS transitions for interactive effects −
<!DOCTYPE html>
<html>
<head>
<style>
.hover-box {
width: 250px;
height: 80px;
border: 2px solid #333;
background-color: #e6f3ff;
padding-top: 20px;
transition: padding-top 0.5s ease-in-out;
text-align: center;
cursor: pointer;
font-family: Arial, sans-serif;
}
.hover-box:hover {
padding-top: 50px;
background-color: #b3d9ff;
}
.text-content {
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h2>Hover to See Animation</h2>
<div class="hover-box">
<div class="text-content">Hover Me!</div>
</div>
</body>
</html>
A light blue box with "Hover Me!" text appears. When you hover over it, the top padding smoothly increases from 20px to 50px over 0.5 seconds, pushing the text down and changing the background to a darker blue. The animation reverses when you move the cursor away.
Conclusion
Animating the padding-top property is useful for creating engaging visual effects and smooth transitions. Use keyframes for continuous animations and transitions for interactive hover effects.
Updated on: 2026-03-15T13:36:01+05:30
320 Views
Advertisements