关于transition

老师，这个

<!DOCTYPE html>

<html>

<head>

<title>transition</title>

<style>

body{background: #abcdef;}

div{

width: 800px;height: 800px;margin:auto;transform: rotate(0deg);background:url('images/imooc.png')no-repeat center center,url('images/circle_outer.png')no-repeat center center;

-webkit-transition-property:transform;

-moz-transition-property:transform;

-ms-transition-property:transform;

-o-transition-property:transform;

transition-property:transform;

}

div:hover{

cursor: pointer;

transform: rotate(180deg);

-webkit-transition-property:transform;

-moz-transition-property:transform;

-ms-transition-property:transform;

-o-transition-property:transform;

transition-property:transform;

}

</style>

</head>

<body>

</body>

</html>

和没有transition属性的时候，不是一样的吗？没什么区别啊。

<!DOCTYPE html>

<html>

<head>

<title>transition</title>

<style>

body{background: #abcdef;}

div{

width: 800px;height: 800px;margin:auto;transform: rotate(0deg);background:url('images/imooc.png')no-repeat center center,url('images/circle_outer.png')no-repeat center center;

}

div:hover{

cursor: pointer;

transform: rotate(180deg);

}

</style>

</head>

<body>

</body>

</html>

不明白为什么要用过渡，感觉没什么用？

慕雪1434180 2018-01-20

源自：CSS3过渡 2-1 transition-property属性

收起

1回答

卡布琦诺回答被采纳获得+3积分 2018-01-21 13:16:54

transition-property 属性规定应用过渡效果的 CSS 属性的名称，不设置没有属性可以获取到过渡属性，过渡是元素从一种样式逐渐改变为另一种的效果，要实现这一点，必须规定两项内容：

（1）规定您希望把效果添加到哪个 CSS 属性上

（2）规定效果的时长

譬如：

<!DOCTYPE html>
<html>

<head>
    <style>
    div {
        width: 100px;
        height: 100px;
        background: yellow;
        /*transition-property:width;定义宽度发生变化*/
        transition-property: width;
        transition-duration: 1s;
        transition-timing-function: linear;
        -moz-transition-property: width;
        -moz-transition-duration: 1s;
        -moz-transition-timing-function: linear;
        -webkit-transition-property: width;
        -webkit-transition-duration: 1s;
        -webkit-transition-timing-function: linear;
        -o-transition-property: width;
        -o-transition-duration: 1s;
        -o-transition-timing-function: linear;
    }
    div:hover {
        width: 200px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

这里宽度从100变成200是一个缓慢的过程，而不是一下子很生硬的就变成200

另外，第一个问题中，你看不到效果是因为你没有定义过渡的时间哦~

希望可以帮到你~

收起回答