Shorthand property to set all the animation properties with CSS


The shorthand property to set all the animation properties is animation. It sets the animation duration, animation name, etc.

You can try to run the following code to work with animation shorthand property:

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            background-color: yellow;
            animation: myanim 2s
         }
         @keyframes myanim {
            from {
               background-color: green;
            }
            to {
               background-color: blue;
            }
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>

Updated on: 24-Jun-2020

100 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements