Use css3 to animate web page elements through styles-CSS Tutorial-php.cn

Use css3 to animate web page elements through styles

零下一度

Release： 2017-04-22 13:41:22

Original

2227 people have browsed it

Using css3 can animate web elements through styles without using javascript and flash, making the website more cool.

css3 transition

##The excessive animation (trainsition) attribute can be used to style the element The browsers supported by training include ie10, firefox, chrome and opera.

Let’s first look at several properties of trainsition:

trainsition-property: Specifies the css attribute name of the application transition.

trainsition-duration: Specifies excessive time spent.

trainsiton-timing-function: Specifies the transition time curve.

trainsition-delay: Specifies when the transition begins.

## Let’s look at a simple transition example first, write

p{
width:100px;
height:100px;
background:red;
trainsition:width 3s,height 2s;//在这里为了方便，将过渡属性简写了，我们可以将过渡属性简写为trainsition:加上上面四个属性，可以把默认属性省略。
}

p:hover
{
width:300px;
height:200px;
}

Copy after login

# in demo.css ##Write

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"  href="demo.css"/>
</head>
<body>

<p></p>

</body>
</html>

Copy after login

in demo.html. Move the mouse to the red p block and you will see that the length and width of the red block slowly increase. This is the simplest transition. accomplish.

Note: If the transition time is not set, it will be 0 by default. There is just no transition effect.

The method we more often use is to add styles through js to practice various animation transitions, as follows:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<style>
p{
   background:red;
   width:200px;
   height:200px;
   transition:width 2s,height 2s;
}
p.over{
width:300px;
height:300px;
}
</style>
</head>
 
<body>
<p 
</p>
<script> 
$(&#39;p&#39;).hover(function(){
  $(&#39;p&#39;).addClass(&#39;over&#39;);},
  function(){
    $(&#39;p&#39;).removeClass(&#39;over&#39;);
});
</script> 
</body>
</html>

Copy after login

In the modified code, jquery is used to add the over style when the mouse passes over it, and remove the over style when the mouse leaves. Since the transition attribute is set in the p style, the transition animation is implemented.

But although the change in style is implemented above, we can see that the change is from an initial state to a final state, and the limitations are very large, so we I hope there will be an intermediate state of transformation. At this time, keyframe animation (@keyframes) will be used:

The basic format is:

@keyframes Name {

Time point {element status}

....

｝

For example, we can use

@frames chgground{
    from{ backgroud:red;}
    to{backgroud:yellow;}
}

Copy after login

to define the keyframe animation and then bind it to an element to be applied, such as:

p{
animation:chgbackground 3s;
}

Copy after login

We use animation to bind. The attributes of this element are:

p Then we have the animation of chgbackground. We can also use percentages to specify the status of key frames. From to is 0% and %. 100. The following code

@frames chgbackground{  
0%{background:yellow;}  
50%{background:red;}  
100%{background:black;}  
}

Copy after login

t uses this code to achieve different gradient effects for the background from 0% to 50% and from 50% to 100%.

To use animate.css, just download animate.css and reference the file, and add a specific animation class name where needed to achieve various effects, such as:

< ;script>$('p').addClass('shake');You can easily add element shaking effects.

The above is the detailed content of Use css3 to animate web page elements through styles. For more information, please follow other related articles on the PHP Chinese website!