Use CSS3 to let page elements animate code through styles

With CSS3, you can animate Web page elements with styles without using JavaScript and flash, making your site even more cool.

CSS3 Transition

The over-animation (Trainsition) property allows for the excessive styling of elements, trainsition supported browsers are Ie10,firefox,chrome and opera.

Let's take a look at several properties of Trainsition:

Trainsition-property: A CSS property name that specifies the transition to apply.

Trainsition-duration: The time required for excessive spending.

Trainsiton-timing-function: Specifies an excessive time curve.

Trainsition-delay: Specify when the transition begins.

Let's look at a simple over-the-top example and write in Demo.css

P{width:100px;height:100px;background:red;trainsition:width 3s,height 2s;//Here for convenience, the transition attributes are abbreviated, We can abbreviate the transition attribute to trainsition: plus the above four attributes, you can omit the default attribute. }p:hover{width:300px;height:200px;}

write in the demo.html.

<! DOCTYPE html>
Move the mouse over the red P block to see the red block length and width increase slowly, this is the simplest implementation of the transition.

Note: If the transition time is not set, it is 0 by default. Is that there is no transition effect.


The way we use it more often is to add styles through JS to practice various animation transitions, as follows:

<! DOCTYPE html>
In the code, we added the over style to the mouse over by jquery, and when the mouse left, the over styles were removed, and the transition animation was realized because the transition property was set in P style.

However, although the above changes in the implementation of the style, we can see that the change is from a beginning state to the end of the change of state, the limitations are very large, so we want to have an intermediate state of transformation. The Keyframe Animation (@keyframes) will be used:

The basic format is:

@keyframes name {

Point in time {element status}

....

｝

If we can use

@frames chgground{    from{backgroud:red;}    To{backgroud:yellow;}}
After you define the Keyframe animation, you also bind it to an element to be applied, such as:

P{animation:chgbackground 3s;}
We use animation to bind, and the attributes of this element are:

P has the Chgbackground animation, we can also use percentages to specify the state of the keyframe, from to is 0% and%100, the following code

@frames chgbackground{  0%{background:yellow;}  50%{background:red;}  100%{background:black;}  }
This code allows you to achieve a different gradient from 0% to 50% and 50% to 100%.

Using ANIMATE.CSS you can achieve various effects by downloading ANIMATE.CSS and referencing the file, adding a specific animated class name where needed, such as:

<script>$ (' P '). addclass (' Shake ');</script> makes it easy to add element jitter effects.