Css:- The border animation


Animatable properties can change gradually from one value to another, like size, numbers, percentage and color.
The border shorthand property sets all the border properties in one declaration.
The properties that can be set, are (in order): border-width, border-style, and border-color.
It does not matter if one of the values above are missing, e.g. border:solid #ff0000; is allowed.





<!DOCTYPE html> 
<html> 
 
<head> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
 <style> 
  #anim { 
   animation: animation_name 2s infinite; 
  } 
   
  @-webkit-keyframes animation_name { 
   from { 
    border: 1px solid green; 
   } 
   to { 
    border: 10px dotted red; 
   } 
  } 
   
  @keyframes animation_name { 
   from { 
    border: 1px solid green; 
   } 
   to { 
    border: 10px dotted red; 
   } 
  } 
 </style> 
 
</head> 
 
<body> 
 <div id="anim"> 
  Border Animation 
 </div> 
 
</body> 
 
</html>
Css:- The border animation Css:- The border animation Reviewed by Network security on May 23, 2019 Rating: 5

No comments:

Useful Information

Powered by Blogger.