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
Set an animation with a slow start, then fast, and end slowly with CSS
The CSS animation-timing-function property with the ease value creates animations that start slowly, speed up in the middle, and then slow down at the end. This creates a natural, smooth animation effect that feels more realistic than linear timing.
Syntax
selector {
animation-timing-function: ease;
}
Example
The following example demonstrates an animation with ease timing that moves a yellow box horizontally −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 80px;
position: relative;
background-color: #FFD700;
color: #333;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
animation-name: slideAnimation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slideAnimation {
from {
left: 0px;
}
to {
left: 300px;
}
}
#demo1 {
animation-timing-function: ease;
}
</style>
</head>
<body>
<div id="demo1">Ease Animation</div>
</body>
</html>
A yellow box with "Ease Animation" text moves horizontally from left to right. The animation starts slowly, accelerates in the middle, and decelerates at the end, creating a natural motion effect. The animation repeats infinitely in alternating directions.
Conclusion
The ease timing function provides the most natural-looking animations by mimicking real-world motion patterns. It's the default value for most CSS animations and creates smooth, professional-looking effects.
Updated on: 2026-03-15T12:41:00+05:30
2K+ Views
Advertisements