关于过渡的问题

老师您好：

在我们课程演示的demo中，原有状态在.box选择器里，末状态在hover里为什么transition要写在.box中而不是写在:hover里呢？正常逻辑不应该是在鼠标触碰到的时候添加transition么？

还有，我原来是做动画的，想问下，CSS的过渡动画，是没有运动模糊的嘛？

后山闲人 2021-11-09

源自：过渡与动画 2-1 过渡的基本使用

收起

1回答

好帮手慕然然 2021-11-09 12:16:05

同学你好，应该这样来理解会好一点：如果将transition属性添加给div:hover{}，那么在鼠标移入的时候会有过渡效果，但是在鼠标离开的时候，就不会有过渡效果了，同学可以自己试一下，css样式会突然地变回去。所以一般情况下，transition属性都是设置给元素本身的，而不是设置给这个元素的某个状态。

另外，关于运动模糊，css没有提供专门的属性，不过可以利用css的过渡属性，来实现运动模糊（在CSS中实现这种效果，需要创建大量相同的元素），代码示例如下：

<html>
	<head>
		<style type="text/css">
			.container {
				width: 320px;
				height: 120px;
				position: relative;
				margin: 120px auto;
				border-radius: 52px;
				border: 3px dotted #eee;
			}

			.dot {
				position: absolute;
				background: black;
				width: 50px;
				height: 50px;
				border-radius: 52%;
				transform: rotate(0deg);
				top: 25px;
				left: 25px;
				opacity: .1;
				transition: all .75s cubic-bezier(.71, 0, .33, 1.56) 0ms;

			}

			.container:hover .dot {
				transform: rotate(360deg);
				left: 225px;
				background: pink;
			}

			.two {
				transition-delay: 3ms;
			}

			.three {
				transition-delay: 6ms;
			}

			.four {
				transition-delay: 9ms;
			}

			.five {
				transition-delay: 11ms;
			}

			.six {
				transition-delay: 14ms;
			}

			.seven {
				transition-delay: 17ms;
			}

			.eight {
				transition-delay: 20ms;
			}

			.nine {
				transition-delay: 23ms;
			}

			.ten {
				transition-delay: 26ms;
			}
		</style>
	</head>

	<body>

		<div class="container">
			<div class="dot one"></div>
			<div class="dot two"></div>
			<div class="dot three"></div>
			<div class="dot four"></div>
			<div class="dot five"></div>
			<div class="dot six"></div>
			<div class="dot seven"></div>
			<div class="dot eight"></div>
			<div class="dot nine"></div>
			<div class="dot ten"></div>
		</div>

	</body>
</html>

祝学习愉快！

收起回答