About Lesson
Animation Timing Function
The animation shorthand property in CSS allows you to specify multiple animation-related properties in a single declaration. It includes properties such as animation name, duration, timing function, delay, iteration count, direction, fill mode, and play state. Here’s the syntax for the animation shorthand property:
Example:
CSS
animation: name duration timing-function delay iteration-count direction fill-mode play-state;Now, let’s break down each property:
name: Specifies the name of the animation, defined using@keyframes.duration: Specifies the duration of the animation.timing-function: Specifies the timing function for the animation (e.g., ease, linear, ease-in, ease-out, ease-in-out).delay: Specifies the delay before the animation starts.iteration-count: Specifies the number of times the animation should repeat.direction: Specifies whether the animation should play in reverse (reverse), alternate direction on each cycle (alternate), or both (alternate-reverse).fill-mode: Specifies how the animation should apply styles before and after it is executed.play-state: Specifies whether the animation is running (running) or paused (paused).
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.out{
height: 100px;
width:100px;
position: relative;
}
.in {
position: absolute;
width: 40px;
height: 40px;
background-color: black;
position: relative;
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes example {
0% {
background-color: pink;
left: 0px;
top: 0px;
}
25% {
background-color: yellow;
left: 200px;
top: 0px;
}
50% {
background-color: red;
left: 200px;
top: 200px;
}
75% {
background-color: orange;
left: 0px;
top: 200px;
}
100% {
background-color: pink;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>In this example:
- We have four
divelements with the class.box, each with a different animation direction (move-right,move-left,move-up,move-down). - The animations are defined using
@keyframesand specify different transformations (translation along X or Y axis). - Each
divelement has a different animation applied to it using theanimationshorthand property, with different durations, timing functions, and iteration counts. - You can observe how each
divmoves in a different direction based on the animation applied to it.