Updated June 23, 2023
Introduction to CSS Animation Transition
In this article, we are discussing CSS animation, which means the process of effects applied to any elements in the layout or slides which allow you to change from one style to another any number of times. To do this, they use keyframes of the elements at a particular time period, and CSS transition means that it is an effect of the movement of elements from one layout or slides to another, which occurs when CSS property changes from one value to another value for a particular time interval. In this, we have to note that animation can set multiple points of transitions using different multiple keyframes whereas transition can only change the style only from one state to another state, not multiple points.
Working on CSS Animation and Transition
In this article, we have provided the ability of CSS to write the behavior of transitions that can change the properties or behavior of an element from one state to another and animations that allow changing the behavior or appearance of elements in the different keyframes. Now let us see with transitions concepts first and then with animations.
Transitions: As discussed above, transition is the concept where the elements change from one state to another with different styles. The CSS transition properties provide different properties. They are as follows:
1. Transition-Property
This property is applied to which the transition should be applied by specifying the name of CSS properties. Therefore, the animation is done only to the listed properties of transitions and changes to other properties as usual. To specify multiple properties can be done using comma-separated within the transition-property value.
Syntax:
Transition-property: value of property to be applied;Some of the popular transition properties are listed below:
- background-color
- margin
- padding
- top
- width
- bottom
- crop
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 180px;
height: 100px;
background: blue;
transition-property: width;
}
</style>
</head>
<body>
<h1>The transition-property Property</h1>
<div></div>
<p> This example is for transition-property </p>
</body>
</html>Output:
2. Transition-Duration
This property specifies the duration of the transition at what period. In this, you can specify the duration of each value, or only once can you specify all the other transition properties. The value in time can be in seconds or milliseconds or fractional measurements also (0.5 s).
Syntax:
Transition-duration: time in seconds;Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 200px;
background: pink;
transition: width;
transition-duration: 10s;
}
</style>
</head>
<body>
<h1>The transition-duration Property</h1>
<div></div>
<p> This is an example for transition-duration </p>
</body>
</html>Output:
3. Transition-Timing-Function
This property is used to set the speed for which we can control the transitional movements of the elements. This function usually holds the value identifiers as linear, ease-out, ease-in, and ease-in-out.
Syntax:
Transition-timing-function: values identifiers;Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 150px;
background: blue;
transition-timing-function: linear;
}
</style>
</head>
<body>
<h1>The transition-timing-function Property</h1>
<div></div>
</body>
</html>Output:
4. Transition-Delay
As the name suggests, this property can be used to set the delay in time, and the value of time is in seconds or milliseconds, which can help users to set how long the transitions can be delayed for displaying or executing.
Syntax:
Transition-delay: value in time;Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
background: pink;
transition-delay: 50s;
}
</style>
</head>
<body>
<h1>The transition-delay Property</h1>
<div></div>
<p> This is an example for transition-delay </p>
</body>
</html>Output:
CSS Animation: Animation is an effect in which elements can change from one style to another. As many CSS properties are as follows animation name, duration, animation direction, and properties that can be specified using keyframes that hold the styles of the elements at a particular period. It includes keyframe rules which have animation-name, animation breakpoints, and other properties related to animations: some animation animation-timing-function and animation-iteration-count.
Let us see a few animation properties with their descriptions:
| Animation Properties | Descriptions |
| animation-delay | This property provides how much delay must be there after the start of an animation |
| animation-direction | This describes in which directions the animation can be specified, such as forward, backward, etc. |
| animation-full-mode | It provides the style whenever the animation is not playing |
| animation-iteration-count | This provides the count or number of times an animation should be played. |
| animation-play-state | This allows you to know whether an animation is running or playing |
| animation-timing-function | This allows you to specify the time which is implemented on the speed curve of the animation. |
Let us see the few animation properties implemented in the below program.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 150px;
background-color: blue;
animation-name: box;
animation-duration: 8s;
}
@keyframes box {
from {background-color: blue;}
to {background-color: green;}
}
</style>
</head>
<body>
<div></div>
<p> This program will change the color of the box from blue to green after 8 seconds</p>
<p>When an animation is done, it changes back to its original style.</p>
</body>
</html>Output:
The above program uses a few animation properties, such as animation-name and animation duration. This program applies an animation to a box, changing its color from blue to green after 8 seconds.
Conclusion
In this article, we are concluding the details of CSS transitions and animations. In this article, first, we saw transition, which means it allows the user to change the property from one state to another with a few properties like transition-property, transition-duration, transition-delay, and transition-timing-function. Secondly, we saw animations that are defined as which allows the elements to change from one style to another style using keyframes. This animation also provides properties like animation name, animation delay, animation direction, animation fill mode, animation iteration count, animation-timing function, animation duration, etc.
Recommended Articles
We hope that this EDUCBA information on “CSS Animation Transition” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
