关于transition的设置有什么限制么？以下代码不能实现过度动画-慕课网

首页课程实战体系课手记专栏慕课教程

关于transition的设置有什么限制么？以下代码不能实现过度动画

来源：8-7 CSS3中的动画--过渡属性 transition-property

慕UI1237056

2016-03-31 12:32

<!DOCTYPE html>

<html>

<head>

<title>变形与动画</title>

<style>

.wrapper5 {

width: 200px;

height: 200px;

background: red;

margin: 20px auto;

transition:width .5s ease-in .18s;

-webkit-transition-property: width;

transition-property: width;

-webkit-transition-duration:.5s;

transition-duration:.5s;

-webkit-transition-timing-function: ease-in;

transition-timing-function: ease-in;

-webkit-transition-delay: .18s;

transition-delay:.18s;

}

.wrapper5 div:hover {

width: 400px;

}

/* .wrapper5 删除了之后就可以实现动画过度了。*/

</style>

</head>

<body>

<div>动画过度属性</div>

</div>

</body>

</html>

写回答关注

3回答

慕妹7508549

2016-10-28 15:18:16

这个是不可以的，要匹配的.wrapper5 div与.wrapper5 div:hover匹配
.wrapper5与.wrapper5:hover匹配

0 0
把孤独当爱人

2016-03-31 13:54:52

.wrapper5:hover {
width: 400px;
}

0 2
jimdev

2016-03-31 13:48:06
把其中的css
```
.wrapper5 div:hover {
  width: 400px;
}
```
改成
```
.wrapper5:hover {
  width: 400px;
}
```
2 0

Frank_... 回复慕UI123...

scale（）这个就是直接去旋转嘛。但是transition就不一样了，他是说这个怎么去执行变化，不是怎么去的出变化的结果。

2016-07-22 22:10:08

共 2 条回复 >

十天精通CSS3

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

242554 学习 · 2623 问题

查看课程

相似问题

动画--过渡属性 transition-property

回答 1

CSS3中的动画--过渡所需时间 transition-duration

回答 1

火狐没有实现动画效果，，是什么原因？

回答 5

动画怎么制作？

回答 1

为什么我设置了两个div,一个有动画，一个没动画效果呢？

回答 3

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