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
Fade In Right Animation Effect with CSS
The CSS Fade In Right animation effect creates a smooth transition where an element starts invisible and positioned to the right, then gradually fades in while moving to its final position. This effect is commonly used for creating engaging entrance animations.
Syntax
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(distance);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.element {
animation: fadeInRight duration timing-function;
}
Key Properties
| Property | Description |
|---|---|
opacity |
Controls the transparency from 0 (invisible) to 1 (fully visible) |
transform: translateX() |
Moves the element horizontally from right to its original position |
animation-duration |
Specifies how long the animation takes to complete |
Example
The following example demonstrates a fade in right animation effect on a colored box −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
border-radius: 8px;
animation: fadeInRight 2s ease-out;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.trigger-animation {
animation: fadeInRight 2s ease-out;
}
</style>
</head>
<body>
<div class="animated-box">
Fade In Right
</div>
<button onclick="location.reload()">Replay Animation</button>
</body>
</html>
A blue box with "Fade In Right" text appears on the page, smoothly fading in while sliding from right to left over 2 seconds. A "Replay Animation" button allows you to restart the effect.
Customization Options
You can modify the animation by adjusting these parameters −
-
Distance: Change
translateX(50px)to control how far the element starts from its final position -
Duration: Modify
2sto make the animation faster or slower -
Timing: Use different timing functions like
ease-in,ease-out, orlinear
Conclusion
The fade in right animation combines opacity and transform properties to create a smooth entrance effect. This technique is perfect for drawing attention to important content or creating polished user interface interactions.
Updated on: 2026-03-15T11:32:54+05:30
292 Views
Advertisements