How to achieve transition animation effect in css3? How to implement css3 transition effect-CSS Tutorial-php.cn

How to achieve transition animation effect in css3? How to implement css3 transition effect

不言

Release： 2018-09-12 14:24:25

Original

4852 people have browsed it

Sometimes we may see such an effect on a web page. When the mouse is placed on certain text or images, some changes will occur. This is actually a transition. It is relatively abstract in this way. So, here is what happens. Let’s introduce the animation effect of css3 transition.

Css3 transition is inseparable from the transition attribute. Transition is a transition animation on a web page. The gradual transition effect of changes is referred to as transition animation.

So, let’s take a look at how the transition attribute of css3 specifically implements the transition effect.

First, let’s take a look at the definition and usage of the transition attribute:

The transition attribute is an abbreviated attribute used to set four transition attributes.

transition-property: Specifies the name of the CSS property that sets the transition effect.

transition-duration: Specifies how many seconds or milliseconds it takes to complete the transition effect.

transition-timing-function: Specifies the speed curve of the speed effect.

transition-delay: Defines when the transition effect starts.

After reading the brief introduction to the definition and usage of the transition attribute.

Now let’s take a look at a css3 code to achieve the transition effect:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小效果</title>
    <style type="text/css">
        /*通配符重置浏览器默认的两个值，
        对本文没有太大影响，不知道可以无视*/
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 400px;
            height: 100px;
            padding-top: 20px;
            line-height: 100px;
            margin:200px auto 0;
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            font-family: "华文行楷";
            background: #000;
            color:#F60;
    transition-property: all;/*变化的东西。all是所有*/
    transition-duration: 1s;/*变化过程的时间*/
    transition-timing-function: linear;/*linear是匀速变化*/
    transition-delay: 0s;/*没有延迟变化*/
    /*下面的是简写属性*/
    /*
        transition:all 1s linear 0s;
    */
        }
        .div1:hover{
            text-shadow: 0px 0px 2px #fff,
                    0px -3px 3px #1EB,
                    0px -6px 4px #01DEFD,
                    0px -9px 5px #0BF,
                    0px -12px 6px #08F;
        }
    </style>
</head>
<body>
    <div>PHP中文网火焰字</div>
</body>
</html>

Copy after login

Finally let’s take a look at the css3 transition effect:

css3 implementation of transition effect process:

How to achieve transition animation effect in css3? How to implement css3 transition effect

css3 implementation of transition effect result:

How to achieve transition animation effect in css3? How to implement css3 transition effect

About the transition attribute For more usage, please refer to css3 Learning Manual.

Related recommendations:

3D image transition effects implemented using CSS3 animation_html/css_WEB-ITnose

About CSS3 Use the transition attribute to achieve transition effects

The above is the detailed content of How to achieve transition animation effect in css3? How to implement css3 transition effect. For more information, please follow other related articles on the PHP Chinese website!