transition过渡写在什么地方好？

div {

    /*此处省略若干....*/
    -webkit-transform: scale(1) rotate(0deg);
    -webkit-transition: transform 2s ease-in-out 1s;
}

div:hover {
    -webkit-transform: scale(2) rotate(360deg);
}

div {

    /*此处省略若干....*/
    -webkit-transform: scale(1) rotate(0deg);
}

div:hover {
    -webkit-transform: scale(2) rotate(360deg);
    -webkit-transition: transform 2s ease-in-out 1s;
}

这两种方法为什么过渡效果不一样？第一个：鼠标经过、离开都有过渡动画。第二个：鼠标经过有动画，离开的时候没有动画。

Little_Gao4229911 2017-09-04

源自：CSS3过渡 3-3 编程练习

收起

1回答

卡布琦诺回答被采纳获得+3积分 2017-09-04 18:21:34

第一种情况在div中设置 -webkit-transition: transform 2s ease-in-out 1s;相当于全局样式，鼠标经过或者离开都会执行 -webkit-transition: transform 2s ease-in-out 1s;这个动画，但是第二个在hover中设置 -webkit-transition: transform 2s ease-in-out 1s;只有在鼠标经过的时候 -webkit-transition: transform 2s ease-in-out 1s;才会执行，祝学习愉快！

收起回答