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
Example of key frames with left animation using CSS3
The CSS @keyframes rule allows you to create smooth animations by defining the intermediate steps between the start and end of an animation. This example demonstrates a left-sliding animation where an element moves from right to left across the screen.
Syntax
@keyframes animation-name {
from {
/* starting CSS properties */
}
to {
/* ending CSS properties */
}
}
selector {
animation-name: animation-name;
animation-duration: time;
}
Example: Left Sliding Animation
The following example shows how to create a sliding animation where text moves from the right side of the screen to its normal position −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
animation-duration: 3s;
animation-name: slidein;
font-size: 2em;
color: #4CAF50;
text-align: center;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
.reload-btn {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #008CBA;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p style="text-align: center;">This is an example of moving left animation.</p>
<button class="reload-btn" onclick="location.reload()">Reload Page</button>
</body>
</html>
The heading "Tutorials Point" slides from the right side of the screen to its normal position over 3 seconds. The animation starts with the element positioned off-screen (margin-left: 100%) and gradually moves to its final position (margin-left: 0%). The reload button allows you to replay the animation.
How It Works
The animation works by −
- @keyframes slidein: Defines the animation sequence with starting and ending positions
-
from state: Element starts at
margin-left: 100%(off-screen right) withwidth: 300% -
to state: Element ends at
margin-left: 0%(normal position) withwidth: 100% - animation-duration: Controls the speed (3 seconds in this example)
Conclusion
CSS keyframes provide powerful control over animations by defining intermediate steps. The left sliding effect is achieved by animating the margin-left property from 100% to 0%, creating a smooth transition from right to left.
Updated on: 2026-03-15T12:08:00+05:30
202 Views
Advertisements