Syntax error Which CSS property is to be used to set the speed curve of the Animation?

Which CSS property is to be used to set the speed curve of the Animation?

Use the animation-timing-function to set the speed curve of the Animation. You can try to run the following code to set ease and ease-in animation effect:

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background-color: yellow;
            animation-name: myanim;
            animation-duration: 2s;
            animation-direction: alternate-reverse;
            animation-iteration-count: 3;
         }
         @keyframes myanim {
            from {left: 100px;}
            to {left: 200px;}
         }
         #demo1 {animation-timing-function: ease;}
         #demo2 {animation-timing-function: ease-in;}
      </style>
   </head>
   <body>
      <div id = "demo1">ease effect</div>
      <div id = "demo2">ease-in effect</div>
   </body>
</html>
Updated on: 2020-06-24T05:52:34+05:30

182 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements