Syntax error Set an animation with the same speed from start to end with CSS

Set an animation with the same speed from start to end with CSS

Use the animation-timing-function property, with the linear value to set animation with the same speed from start to end with CSS

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;}
         }
         #demo {animation-timing-function: linear;}
      </style>
   </head>
   <body>
      <div id = "demo">linear effect</div>
   </body>
</html>
Updated on: 2020-06-24T06:20:20+05:30

262 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements