CSS3 transition

Let's animation timed

Transition, for example, will be the description of the animation When you put the mouse cursor to a certain element.

The method presented here, is the way in conjunction with the "animation" which is introduced in another.

Transition I own it is also possible to specify the movement, but on the relationship of the browser, I'm taking this way.

 div#transition{
     width:50%;
     height:100px;
     margin-left:15px;
     background:#F1F1F1;
     border-radius:10px;
     transition: all .4s;
 }
 div#transition:hover{
     box-shadow:3px 3px 3px rgba(0,0,0,0.4);
     -webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.4);
     transform:rotateZ(360deg) skewX(20deg);
     -moz-transform: rotateZ(360deg) skewX(20deg);
     -webkit-transform: rotateZ(360deg) skewX(20deg);
     -o-transform: rotateZ(360deg) skewX(20deg);
     -ms-transform: rotateZ(360deg) skewX(20deg);
 }

This method is to first move like element, specifies the movement of the time.

Then, it has become to move while animation when the mouse cursor is riding on the element.

Here, has become a way in combination with the "transform", because we are different ways is me looking at the other website, you might want to reference.

So it can be combined with such as "text-shadow" and "box-shadow", please try.