EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

CSS Animation Transition

By Abhilasha ChouguleAbhilasha Chougule

Home » Software Development » Software Development Tutorials » CSS Tutorial » CSS Animation Transition

CSS Animation Transition

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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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:

CSS Animation Transition Example 1

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).

Popular Course in this category
CSS Training (9 Courses, 9+ Projects)9 Online Courses | 9 Hands-on Projects | 61+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (5,429 ratings)
Course Price

View Course

Related Courses
Bootstrap Training (2 Courses, 6+ Projects)jQuery Training (8 Courses, 5 Projects)

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:

CSS Animation Transition Example 2

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:

Timing-Function Example 3

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:

Delay Example 4

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:

CSS Animation Transition Example 5

CSS Animation Transition Example 5

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 on CSS Animation Transition and its working along with Examples and code Implementation. You can also go through our other suggested articles to learn more –

  1. CSS Overflow
  2. CSS Scrollbar
  3. CSS tricks
  4. CSS Order

CSS Training (9 Courses, 9+ Projects)

9 Online Courses

9 Hands-on Projects

61+ Hours

Verifiable Certificate of Completion

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
CSS Tutorial
  • CSS
    • Introduction To CSS
    • What is CSS?
    • Uses Of CSS
    • Advantages of CSS
    • Career In CSS
    • CSS Commands
    • Is Css Case Sensitive
    • CSS object-fit
    • Types of CSS Selectors
    • CSS Radio Button
    • CSS Attribute Selector
    • CSS first child of class
    • CSS Selector nth Child
    • CSS Parent Selector
    • CSS Child Selector
    • CSS Not Selector
    • CSS Descendant Selector
    • CSS Inline Style
    • Checkbox CSS
    • CSS Appearance
    • CSS Font Properties
    • CSS font-variant
    • CSS Pagination
    • CSS Table Styling
    • CSS Table Cell Padding
    • CSS Padding Color
    • CSS Text Formatting
    • CSS for Text-Shadow
    • CSS text-stroke
    • CSS text-indent
    • CSS Rotate Text
    • CSS Text Color
    • CSS Center Div
    • CSS Arrow
    • CSS Arrow Down
    • CSS offset
    • CSS Cursor
    • CSS Layout
    • CSS Grid Layout
    • Button in CSS
    • CSS Button Border
    • text-align in CSS
    • CSS Horizontal Align
    • CSS Position
    • CSS Box Sizing
    • CSS box-shadow
    • CSS Text Underline
    • CSS Text Outline
    • CSS Blinking Text
    • Text Decoration CSS
    • CSS Vertical Align
    • CSS Word Wrap
    • CSS Padding
    • CSS Font Color
    • CSS Color Generator
    • CSS Margin Right
    • CSS Margin Color
    • CSS Color Codes
    • CSS Color Transparent
    • CSS Color Chart
    • CSS Link Color
    • CSS z-index
    • CSS Curved Border
    • CSS Border Left
    • CSS left
    • CSS Gradient Generator
    • Radial Gradient in CSS
    • CSS Shape Generator
    • CSS Triangle Generator
    • CSS background-color
    • CSS Background Image
    • CSS background-clip
    • CSS background-blend-mode
    • CSS Drop Shadow
    • CSS line height
    • CSS line break
    • Sticky Footer CSS
    • CSS Header Design
    • CSS Border Style
    • CSS Border Generator
    • Sticky Sidebar CSS
    • CSS Transparent Border
    • CSS Border Radius
    • CSS translate
    • CSS transform
    • CSS 3D Transforms
    • CSS Text Transform
    • CSS Transition Effects
    • CSS Transition Property
    • CSS Animation Transition
    • Negative Margin CSS
    • CSS Navigation Bar
    • CSS Overflow
    • CSS overflow-wrap
    • CSS Lists
    • CSS list-style
    • CSS Order
    • CSS Box Model
    • CSS Inner Border
    • CSS Icon
    • Menu Icon CSS
    • CSS Multiple Borders
    • Opacity in CSS
    • CSS Float Right
    • CSS Clear Float
    • CSS clip
    • CSS disabled
    • CSS Border Padding
    • Border Images in CSS
    • CSS Visibility
    • CSS Validator
    • CSS Clearfix
    • CSS Counter
    • CSS Letter Spacing
    • CSS root
    • CSS zoom
    • CSS calc()
    • CSS.supports()
    • CSS Loader
    • Media Query CSS
    • CSS @keyframes
    • CSS @bottom
    • CSS page-break-after Property
    • CSS page-break
    • CSS Position Fixed
    • CSS skew()
    • CSS Row
    • CSS Masking
    • CSS Scrollbar
    • CSS Overlay
    • CSS Important
    • CSS Cursor Hand
    • CSS Inherit
    • CSS Position Relative
    • CSS Compressor
    • CSS tricks
    • CSS Outline Property
    • CSS Flexbox Properties
    • CSS flex-direction
    • CSS content property
    • CSS Typography
    • CSS Formatter
    • CSS nowrap
    • CSS Column
    • GridView CSS
    • CSS Viewport
    • CSS Minify
    • CSS Combinators
    • CSS in React
    • CSS Matrix 
    • CSS Pseudo Elements
    • CSS Pseudo Classes
    • CSS Pointer Events
    • CSS Resize
    • CSS Inheritance
    • CSS Interview Questions
    • Cheat Sheet CSS
  • CSS3
    • What is CSS3?
    • CSS3 Interview Questions
    • Cheat sheet CSS3
  • sass
    • How to Install SASS
    • SASS Interview Questions
    • What is Sass
    • SASS Comments
    • Sass Variables
    • SASS Import
    • SASS if else
    • SASS Nesting
    • SASS @each
    • SASS @at-root
    • SASS @extend
    • SASS @media
    • SASS @for
    • SASS Map
    • SASS Selectors
    • SASS Color Functions
    • SASS Mixins

Related Courses

CSS Training Course

Bootstrap Training Course

JQuery Training Course

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - CSS Training (9 Courses, 9+ Projects) Learn More