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 change from one style to another any number of time to do this they use keyframes of the elements at the particular time period and CSS transition means that is an effect of movement of elements from one layout or slide 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 of CSS Animation and Transition
In this article, we have provided the ability of CSS to write behavior of transitions that have the capability to change the properties or behavior of an element from one state to another state and animations that allows 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 the transition is the concept where the elements change from one state to another with different styles. There are different properties provided by the CSS transition 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 properties of transitions that are listed and changes to other properties are done 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:
Code:
<!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 time duration for which the transition occurs at what period. In this, you can specify the duration to each value or only once you can specify for all the other transition properties. The value in time can be in seconds or milliseconds or fractional measurements also (0.5 s).
4.5 (7,122 ratings)
View Course
Syntax:
Transition-duration: time in seconds;
Example:
Code:
<!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:
Code:
<!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:
Code:
<!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: The animation is an effect in which elements can change from one style to another such as many CSS properties are as follows animation-name, animation-duration, animation direction, properties that can be specified using keyframes that hold styles of the elements at a particular period. It includes keyframes 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 its 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 that 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:
Code:
<!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:
In the above program, we can see that few animation properties like animation-name, animation-duration are used and this program gives the animation where the animation is named as a box with its event as changing its color from blue to green after 8 seconds of time duration.
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 few properties like transition-property, transition-duration, transition-delay, and transition-timing-function. Secondly, we saw about animations that are defined as which allows the elements to change from one style to another style using keyframes. This animation also provides a few properties like animation-name, animation-delay, animation-direction, animation-fill-mode, animation-iteration-count, animation-timing-function, animation-duration, etc.
Recommended Articles
This is a guide to CSS Animation Transition. Here we discuss a brief overview of CSS Animation Transition and its working along with Examples and code Implementation. You can also go through our other suggested articles to learn more –
