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
Animate bottom CSS property
The CSS bottom property can be animated to create smooth transitions when changing an element's position from the bottom edge of its containing block. This is particularly useful for creating sliding effects and dynamic positioning animations.
Syntax
selector {
animation: animation-name duration timing-function iteration-count;
bottom: initial-value;
position: absolute | relative | fixed;
}
@keyframes animation-name {
percentage {
bottom: target-value;
}
}
Example: Animating Bottom Property
The following example demonstrates how to animate the bottom property to move an element vertically −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 400px;
background-color: #f0f0f0;
border: 2px dashed #ccc;
}
.animated-box {
width: 200px;
height: 100px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border: 3px solid #333;
position: absolute;
bottom: 30px;
left: 50px;
animation: moveUp 3s ease-in-out infinite;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
@keyframes moveUp {
0% {
bottom: 30px;
}
50% {
bottom: 250px;
}
100% {
bottom: 30px;
}
}
</style>
</head>
<body>
<h2>Animating Bottom Property</h2>
<div class="container">
<div class="animated-box">Moving Box</div>
</div>
</body>
</html>
A colorful box with gradient background moves smoothly up and down within a container. The animation starts from 30px from the bottom, moves up to 250px from the bottom at the midpoint, then returns to the starting position. The animation repeats continuously with a smooth easing effect.
Key Points
- The element must have
position: absolute,relative, orfixedfor the bottom property to work - The bottom property specifies the distance from the bottom edge of the containing block
- Use
@keyframesto define different bottom values at various animation stages - Combine with timing functions like
ease-in-outfor smoother animations
Conclusion
Animating the CSS bottom property creates smooth vertical movement effects. Remember to set the proper position value and use keyframes to define the animation sequence for the best results.
Updated on: 2026-03-15T13:17:35+05:30
2K+ Views
Advertisements