transition过渡写在什么地方好？

来源：3-3 编程练习

Little_Gao4229911

2017-09-04 16:58:56

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;
}

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

写回答

1回答

樱桃小胖子

2017-09-04

已采纳

第一种情况在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;才会执行，祝学习愉快！

hittle_Gao4229911

h 非常感谢！

h017-09-04

共1条回复

0 学习 · 5760 问题

查看课程

相似问题

transition在第一个div中，div:hover中为什么不需要写？

回答 1

老师，既然都是默认过度，为什么还要用transition-property，不是多此一举吗？

回答 1

CSS3过渡作业问题

回答 2

参与过渡的属性名称

回答 1

trasition-duration，transition-delay？

回答 1

打开慕课网App查看更多内容