Css3 allows you to easily implement animation Transitions and css3transitions.
In software development, web front-end animation is an indispensable special effect. Before css3, most animations were implemented using reliable javascript, the steps are much more complex than those of css3 today. Although there are a lot of good frameworks. It is much easier to implement animations in css3. In css3, either transitions or animations is responsible for animation. Today I will share with you the usage of transitions. Browser support is not widely used here. If you cannot see the animation effect, it means that your browser does not support css3.
Here, let's take a look at the effect. Moving the data above will change.
Transition: [transition-property] | [transition-duration] | [transition-timing-function] | [transition-delay]
[Transition-property]:
Retrieves or sets the attributes of the object involved in the transition.
[Transition-duration]:
Retrieve or set the object transition duration
[Transition-timing-function]:
Retrieving or setting the animated types of transition in an object
[Transition-delay]:
Retrieves or sets the object delay transition
Below is the source code
- <! Doctype html>
- <Html>
- <Body>
-
- <Div class = "a"> </div>
- <Div class = "a"> </div>
- <Div class = "a"> </div>
- <Div class = "a"> </div> <div class = "a"> </div> <div class = "a"> </div>
- <Style>
- . A {width: 300px; height: 30px; background: #0C9;-webkit-transition: width 1 s gradient, background-color 1 s gradient}
- . A: hover {background-color: #9C0; width: 150px; height: 30px;-webkit-transition: width 1 s gradient, background-color 1 s gradient}
- </Style>
- </Body>
- </Html>