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 vertical-align property with CSS Animation
The CSS vertical-align property can be animated using CSS animations to create smooth transitions between different vertical alignment values. This is particularly useful for animating inline elements like images, text, or inline-block elements.
Syntax
selector {
vertical-align: initial-value;
animation: animation-name duration;
}
@keyframes animation-name {
percentage {
vertical-align: target-value;
}
}
Example: Animating Image Vertical Alignment
The following example demonstrates how to animate the vertical alignment of an image within text −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-image {
width: 80px;
height: 80px;
vertical-align: 0px;
animation: verticalMove 3s infinite alternate;
}
@keyframes verticalMove {
0% {
vertical-align: 0px;
}
50% {
vertical-align: 40px;
}
100% {
vertical-align: 80px;
}
}
.text-container {
font-size: 18px;
line-height: 1.5;
max-width: 500px;
}
</style>
</head>
<body>
<h1>CSS vertical-align Animation</h1>
<div class="text-container">
<img src="/css/images/logo.png" class="animated-image" alt="Logo">
This is demo text showing how the image moves vertically relative to the text baseline.
The animation creates a smooth transition between different vertical alignment values.
</div>
</body>
</html>
An image appears alongside text and smoothly moves up and down relative to the text baseline, animating from 0px to 40px to 80px vertical alignment over 3 seconds, then reversing.
Key Points
- The
vertical-alignproperty only works on inline and table-cell elements - Values can be specified in pixels (px), percentages (%), or keywords like
baseline,top,middle - Use
infinite alternateto create a continuous back-and-forth animation effect - Positive values move the element up, negative values move it down relative to the baseline
Conclusion
Animating the vertical-align property provides an effective way to create dynamic vertical movement effects for inline elements. This technique is commonly used for creating engaging visual effects in text layouts and interactive designs.
Updated on: 2026-03-15T13:37:27+05:30
599 Views
Advertisements