02-CSS basic and advanced -day12_2018-09-19-21-37-34

08CSS3 animation .html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div { 
             width : 120px ; 
             height : 120px ; 
             background-Color : Pink ;
                       / * name of the animation movie begins playing when the temporal motion profile in the reverse direction if the number of * / 
          Animation : RUN 4S EASE Infinite Alternate 0s ;
       }
       / * Define animation * / 
       @keyframes RUN {
              from {
              transform: translateX(0);
              } 
              to {
               transform: translateX(500px);
              }
       }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

More than 09 sets animation .html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div { 
             width : 120px ; 
             height : 120px ; 
             background-Color : Pink ;
                       / * name of the animation movie begins playing when the temporal motion profile in the reverse direction if the number of * / 
          Animation : RUN 4S EASE Infinite 0s ;
       }
       / * Define animation * / 
       @keyframes RUN {
              0% {
              transform: translate3d(0,0,0);
              } 

              25% {
              transform: translate3d(600px,0,0);
              }

              50% {
                    transform: translate3d(600px,400px,0);
              }

              75% {
                    transform: translate3d(0,400px,0);
              }
              100% {
               transform: translate3d(0,0,0);
              }
       }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

02-CSS basic and advanced -day12_2018-09-19-21-37-34

Guess you like