Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Style transitionTimingFunction property
  • Last Updated : 02 Aug, 2019

The DOM Style transitionTimingFunction property allows a transition effect to change speed over its duration. Transition effect provides a way to control animation speed when changing properties.

Syntax:

  • To set the property:
    object.style.transitionTimingFunction = "ease|linear|ease-in|
    ease-out|ease-in-out"
  • To get the property:
    object.style.transitionTimingFunction

    Property Values:

    • ease: Specifies a transition effect that starts slowly, then fast, then slow.
    • linear: Specifies a transition effect with the same speed from start to end.
    • ease-in: Specifies a transition effect with a slow start.
    • ease-out: Specifies a transition effect with a slow end.
    • ease-in-out: Specifies a transition effect with a slow start and end.

    Example 1: This example describes linear property value.




    <!DOCTYPE html>
    <html>
          
    <head
        <title>
            HTML | DOM Style transitionTimingFunction property
        </title>
        <style
          
            #GFG {
              background-color: green;
              width: 150px;
              height: 150px;
              overflow: auto;
                
              /* For Safari Browser */
              -webkit-transition: all 2s;
              transition: all 2s;
            }
              
            #GFG:hover {
              width: 300px;
              height: 300px;
            }
        </style>
    </head>
      
    <body>
          
        <button onclick = "myGeeks()">
            Click Here!
        </button>
          
        <br><br>
          
        <div id = "GFG">
        </div>
          
        <script>
        function myGeeks() {
              
            /* For Safari Browser */
            document.getElementById("GFG").style.WebkitTransitionTimingFunction
                    = "linear";
            document.getElementById("GFG").style.transitionTimingFunction
                    = "linear"; 
        }
        </script>
      
    </body>
      
    </html>

    Output:



    Example 2: This example describes ease-in property value.




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            HTML | DOM Style transitionTimingFunction property
        </title>
        <style
          
            #GFG {
              background-color: green;
              width: 150px;
              height: 150px;
              overflow: auto;
                
              /* For Safari Browser */
              -webkit-transition: all 2s;
              transition: all 2s;
            }
              
            #GFG:hover {
              width: 300px;
              height: 300px;
            }
        </style>
    </head>
      
    <body>
          
        <button onclick = "myGeeks()">
            Click Here!
        </button>
          
        <br><br>
          
        <div id = "GFG">
        </div>
          
        <script>
        function myGeeks() {
              
            /* For Safari Browser */
            document.getElementById("GFG").style.WebkitTransitionTimingFunction
                    = "ease-in";
            document.getElementById("GFG").style.transitionTimingFunction
                    = "ease-in"; 
        }
        </script>
      
    </body>
      
    </html>

    Output:

    Note: Use WebkitTransitionTimingFunction as a keyword in safari browser.

    Supported Browsers: The browser supported by HTML | DOM Style transitionTimingFunction property are lited below:

    • Google Chrome 26.0
    • Internet Explorer 10.0
    • Mozilla Firefox 16.0
    • Opera 12.1
    • Safari 6.1, 3.1 WebkitTransitionTimingFunction



    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :