HTML CSS examples for CSS Animatable Property:background
Slide background color transition animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> a{<!--from w ww. java 2 s.c o m--> display:inline-block; background:#fff; position:relative; padding:2px 5px; background:-webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, #000)); background:-webkit-linear-gradient(left, #fff 50%, #000 50%); background:-moz-linear-gradient(left, #fff 50%, #000 50%); background:linear-gradient(to right, #fff 50%, #000 50%); background-size:200% 100%; background-position:0 0; -webkit-transition:background-position .3s ease-out; -moz-transition:background-position .3s ease-out; transition:background-position .3s ease-out; } a:hover{ background-position:-100% 0; } </style> </head> <body> <a href="#">aosgibmoa bnocibnas</a> </body> </html>