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 Left Big Animation Effect with CSS
The CSS Fade In Left Big animation effect creates a dramatic entrance animation where an element slides in from the far left while simultaneously fading in from transparent to opaque. This effect uses translateX(-2000px) to start the element off-screen.
Syntax
@keyframes fadeInLeftBig {
0% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeftBig {
animation-name: fadeInLeftBig;
animation-duration: 1s;
}
Example
The following example demonstrates the Fade In Left Big animation effect applied to a box element −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
margin: 50px auto;
animation: fadeInLeftBig 2s ease-in-out;
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.reload-btn {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="animated-box">Fade In Left Big</div>
<button class="reload-btn" onclick="location.reload()">Reload Animation</button>
</body>
</html>
A blue box with "Fade In Left Big" text slides in dramatically from the far left of the screen while fading in over 2 seconds. A red reload button appears below to restart the animation.
Key Properties
| Property | Value | Description |
|---|---|---|
opacity |
0 to 1 | Controls the fade-in effect |
transform: translateX() |
-2000px to 0 | Moves element horizontally from far left |
animation-duration |
1s, 2s, etc. | Controls animation speed |
Conclusion
The Fade In Left Big animation effect provides an impressive entrance animation by combining opacity changes with large horizontal movement. It's perfect for drawing attention to important content or creating dynamic page introductions.
Updated on: 2026-03-15T11:37:07+05:30
163 Views
Advertisements