<!DOCTYPE html> <html> <head> <style> div{ width:20%; height:100px; background-color:red; position:relative; animation-name:changeBG; -webkit-animation-name:changeBG; /* for safari */ animation-duration:1s; -webkit-animation-duration:1s; /* for safari */ animation-iteration-count:1; -webkit-animation-iteration-count:1; /* for safari */ animation-direction:reverse; -webkit-animation-direction:reverse; /* for safari */ } @keyframes changeBG{ 0%{ left:0%; top:0% } 100%{ left:80%; top:0% } } @-webkit-keyframes changeBG{ /* for safari */ 0%{ left:0%; top:0% } 100%{ left:80%; top:0% } } </style> <body> <div>Web4College</div> </body> </head>
Run
×
Share