Transitions_html/css_WEB-ITnose to easily realize animation with css3

In software development, the animation developed by the web front-end is an indispensable special effect for us. Before CSS3, most animations could be realized by JavaScript, and the steps were relatively Today's CSS3 is much more complicated. Although there are many good frameworks. It is much simpler to implement animation in css3. There are two people responsible for animation in CSS3, one is transitions and the other is animations. These two can be said to be different. Today I will share with you the usage of transitions. Browser support is not universal here. If you can’t see the animation effect, it means that your browser does not support css3

Take a look at the effect here. Moving the data above will Changes

transition: [ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

[ transition-property ]:
Retrieve or set the properties in the object that participate in the transition
[ transition-duration ]:
Retrieve or set the duration of the object transition
[ transition-timing-function ]:
Retrieve or set the animation type of the transition in the object
[ transition-delay ]:
Retrieve or set the animation type of the object's delayed transition

The following is the source code

10. .a{ width:300px; height:30px; background:# 0C9;-webkit-transition: width 1s ease,background-color 1s ease }
11. .a:hover{background-color:#9C0; width:150px; height:30px; -webkit-transition: width 1s ease,background-color 1s ease}