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
Moving left animation with keyframes using CSS3
CSS keyframes allow you to create smooth animations by defining specific styles at different points during the animation sequence. The following example demonstrates how to create a moving left animation where text slides in from the right side of the screen.
Syntax
@keyframes animation-name {
from { /* starting styles */ }
to { /* ending styles */ }
}
/* Or with percentages */
@keyframes animation-name {
0% { /* starting styles */ }
50% { /* middle styles */ }
100% { /* ending styles */ }
}
selector {
animation-name: animation-name;
animation-duration: time;
}
Example
The following example creates a slide-in animation from right to left with intermediate styling changes −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
animation-duration: 3s;
animation-name: slidein;
animation-fill-mode: both;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
to {
margin-left: 0%;
width: 100%;
}
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Tutorials Point</h1>
<p>This is an example of animation left with an extra keyframe to make text changes.</p>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
The heading "Tutorials Point" slides in from the right side of the screen, grows to 300% size at the 75% mark, then settles to normal size at the left edge. A green "Reload page" button allows you to replay the animation.
Key Points
The animation works by defining three keyframe stages:
- from (0%): Element starts off-screen to the right with 300% width
- 75%: Element is 25% from left edge, enlarged to 300% font size
- to (100%): Element reaches final position at left edge with normal size
Conclusion
CSS keyframes provide precise control over animations by defining intermediate steps. The animation-fill-mode: both property ensures the element maintains its final animated state, creating smooth left-moving animations with custom styling changes.
Updated on: 2026-03-15T12:08:17+05:30
303 Views
Advertisements