CSS3 Transitions and animations

mouse hover glare effect: http://demo.qpdiy.com/hxw/CSS3/button-light.html

There are three ways to implement this action on a Web page:

The first is JS, can be implemented with jquery animate events, if you do not want to use JS words can be achieved through CSS3

transitions :. button:hover i {left:100%;-webkit-transition:.5s;-moz-transition:.5s; transition:.5s;}

———— when the mouse is removed, I will change directly to the original position, if transition:.5s, written on the original I, the mouse will be moved back to the original position quickly

Animations :

. button:hover I {-webkit-animation:butleft 0.5s;-moz-animation:butleft 0.5s;-o-animation:butleft 0.5s; animation:but Left 0.5s; }

@keyframes Butleft {from {left:-100px;} to {left:100px;}}

@-moz-keyframes butleft/* Firefox */{from {left:-100px;} to {left:100px;}}

@-webkit-keyframes butleft/* Safari and Chrome */{from {left:-100px;} to {left:100px;}}

@-o-keyframes butleft/* Opera */{from {left:-100px;} to {left:100px;}}

CSS3 animation is a bit more code than a transition, but it can directly define different actions from 0% to 100%

Attention:

1. If there is no content in the <i> element, the event is not bound and must be bound to the label of the button's existence;

2. Hover event cannot be bound with on

CSS3 Transitions and animations