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
CSS top property with Animation
The CSS top property specifies the vertical position of a positioned element. When combined with CSS animations, you can create smooth movement effects by animating changes to the top value over time.
Syntax
selector {
top: value;
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
percentage {
top: value;
}
}
Example: Animating Top Property
The following example demonstrates how to animate the top property to create a bouncing effect −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 400px;
background-color: #f0f0f0;
border: 2px solid #ccc;
}
.animated-box {
position: absolute;
width: 150px;
height: 100px;
background-color: #4CAF50;
color: white;
top: 0;
left: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% {
top: 0;
}
50% {
top: 250px;
}
}
</style>
</head>
<body>
<h2>CSS Top Property Animation</h2>
<div class="container">
<div class="animated-box">
Bouncing Box
</div>
</div>
</body>
</html>
A green rounded box with white text "Bouncing Box" continuously bounces up and down within a gray container, moving from top: 0 to top: 250px and back in a smooth 2-second animation cycle.
Key Points
- The element must have
position: absolute,relative, orfixedfor thetopproperty to take effect - Animation timing functions like
ease-in-outcreate smoother, more natural movement - Use percentage keyframes to control the animation at specific points in time
Conclusion
Animating the top property allows you to create vertical movement effects. Combined with keyframes and timing functions, you can achieve smooth and visually appealing animations for positioned elements.
Updated on: 2026-03-15T13:36:57+05:30
1K+ Views
Advertisements