Related Articles

Related Articles

CSS | animation-timing-function Property
  • Last Updated : 06 Aug, 2019

The animation-timing-function property in CSS is used to specify how the animation makes transitions through keyframes. That is, it is used to specify the motion of animation during transitions.

Syntax:

animation-timing-function: linear | ease | ease-in | ease-out | 
ease-in-out | step-start | step-end|steps(int, start | end) | 
cubic-bezier(n, n, n, n) | initial | inherit;

Property Value:

  • ease: With this property value, the animation starts slowly, then fast, and then finally ends slowly (this is default).
  • linear: If this value is specified for the property then the animation plays with the same speed from start to end.
  • ease-in: If this value is specified then the animation begins with a slow start.
  • ease-out: If this value is specified for the property then the animation plays normally but ends slow. This is similar to ease-in.
  • ease-in-out: With this property value, the animation both starts and ends slow.

Example: HTML Program to illustrate the above property values for animation-timing-function property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title>
             CSS | animation-timing-function Property
        </title>
        <style
            .geeks { 
                font-size: 40px; 
                text-align:center; 
                font-weight:bold; 
                color:#090; 
                padding-bottom: 5px; 
                font-family:Times New Roman; 
            
              
            .geeks1 { 
                font-size:17px; 
                font-weight:bold; 
                text-align:center; 
                font-family:Times New Roman; 
            
              
            h2 { 
                width: 350px; 
                animation-name: text; 
                animation-duration: 4s; 
                animation-iteration-count: infinite; 
                background-color: rgb(255, 210, 85); 
            
              
            #one { 
                animation-timing-function: ease; 
            
              
            #two { 
                animation-timing-function: linear; 
            
              
            #three { 
                animation-timing-function: ease-in; 
            
              
            #four { 
                animation-timing-function: ease-out; 
            
              
            #five { 
                animation-timing-function: ease-in-out; 
            
              
            @keyframes text { 
                from { 
                    margin-left: 60%; 
                
                to { 
                    margin-left: 0%; 
                
            
        </style
    </head
    <body
        <div class = "geeks">
            GeeksforGeeks
        </div
          
        <div class = "geeks1">
            A computer science portal for geeks
        </div
          
        <!-- For this the animation-timing-function will 
             be set to ease -->
        <h2 id="one">
            This text is ease.
        </h2
          
        <!-- For this animation-timing-function will 
             be set to linear -->
        <h2 id="two">
            This text is linear.
        </h2
          
        <!-- For this animation-timing-function will 
             be set to ease-in -->
        <h2 id="three">
            This text is ease-in.
        </h2
          
        <!-- For this animation-timing-function will 
             be set to ease-out -->
        <h2 id="four">
            This text is ease-out.
        </h2
          
        <!-- For this animation-timing-function will 
             be set to ease-in-out -->
        <h2 id="five">
            This text is ease-in-out.
        </h2
    </body
</html>                                       

chevron_right


Supported Browser: The browser supported by animation-play-state property are listed below:

  • Google Chrome 43.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Opera 30.0
  • Safari 9.0

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :