>> I want to be a spy series CSS 3_animation_ slide right out and then slide and stop

Beginners have not formally sent something, are in the decoration blog This home, until now still no decoration good. Familiar with this side of the release specifications will continue to record here, to leave their learning footprints ~

This formal first essay writes an animated effect using CSS3.

Always feel the movie agent kind of cool application interface is very comfortable, began to try to use CSS3 to do one, so this is a series of articles, the name is called ' I want to be an agent '. Not much in the past CSS3, starting from here, after all, expect others to provide approximate project-based needs to return time to learn the opportunity is not very realistic, self-clothed well ~

First look at the effect:

<! DOCTYPE html>{width:10px;Height:2px;background:Red;}Div:hover{/*bind a selector here, bind the csssplit to the Div:hover*/    /*animation:csssplit 5s Infinite;*/    /*animation-direction:alternate;*//*Play back again after playing*/Animation:Csssplit 5s Alternate;Animation-fill-mode:forwards;/*stop at the last frame after playing*/}@keyframes Csssplit/*firefox-moz-did not add, Csshack himself do*/{0% {background:Red;width:10px;Height:2px;}10%{background:Yellow;width:500px;Height:2px;}30%{background:Yellow;width:500px;Height:200px;}100%{background:Yellow;width:500px;Height:200px;}}</style>

Ps: Layout and coloring should also be re-regulation it. Send a try, dislocation of feeling very strong AH.

-----

Ps: Sure enough coloring or a success ah, do not redraw themselves. Inserting a code changed three times the format is also no one ...

>> I want to be a spy series CSS 3_animation_ slide right out and then slide and stop