CSS动画控制:暂定后继续

追格官方小助手/ 2022年05月18日/ CSS教程/ 浏览 1494

CSS动画与JS动画相比较,优势劣势都很明显。所谓劣势就是【缺少控制】,不能随心所欲的控制动画。


不过随着CSS的属性越来越多,借助一些属性,对CSS动画也能控制了。


借助CSS3 animation-fill-mode 属性,可以实现CSS动画暂停后再继续了!


比如以下代码,只有在鼠标移动到红色块之上后,红色块才会移动。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS动画暂停与继续</title> 
<style> 
.red-div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	
	animation:myanimation 3s infinite;
	-webkit-animation:myanimation 3s infinite;
	
	animation-play-state:paused;
	-webkit-animation-play-state:paused;
}

.red-div:hover {
	animation-play-state:running;
	-webkit-animation-play-state:running;
}

@keyframes myanimation
{
	from {left:0px;}
	to {left:200px;}
}

@-webkit-keyframes myanimation
{
	from {left:0px;}
	to {left:200px;}
}
</style>
</head>
<body>

<div class="red-div"></div>

</body>
</html>


运行结果:




代码的关键点,就是改变 animation-play-state 的属性:paused - running。

css

发表评论

暂无评论,抢个沙发...

客服 工单