老师。hover中的transition-duration可以不写吗，

老师。hover中的transition-duration可以不写吗，效果是一样的呀

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

margin: 0;

padding: 0;

}

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;

-webkit-transition-duration: 2s;

-moz-transition-duration: 2s;

-ms-transition-duration: 2s;

-o-transition-duration: 2s;

transition-duration: 2s;

}

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;

-webkit-transition-duration: 2s;

-moz-transition-duration: 2s;

-ms-transition-duration: 2s;

-o-transition-duration: 2s;

transition-duration: 2s;

}

</style>

</head>

<body>

</body>

</html>

慕神8387157 2019-06-04

源自：CSS3过渡 2-3 transition-duration属性

收起

1回答

好帮手慕言 2019-06-04 15:57:31

同学你好，可以不写的。因为在div里面已经写了，所以在hover时可以省略。

如果帮助到了你，欢迎采纳~祝学习愉快。

收起回答

宝慕林3013065 #1

做了一下实验，如果hover里的时间不写的话不会有缓慢上去的效果，但是鼠标移走的时候会有缓慢下来的效果，所以还是看要怎么应用吧

2020-04-20 10:27:47
向学习者学习回复宝慕林3013065 #2

好像不对吧，div:hover里面的
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-ms-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
不写完全没问题，移入的时候缓变，移出的时候还是缓变，因为外面写了，
如果外面没写里面写了，才是移入的时候缓慢变化，移出的时候瞬间变化。

2023-05-18 19:12:51