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详解系列：10-Flex项目属性orderorder 属性 用来设置或检索弹性盒模型对象的项目（子元素）在容器中出现的順序。
-
css详解系列：11-Flex项目属性align-selfalign-self属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果，看看如何实现的。
-
css样式表的三种样式css（级联样式表）主要有三种样式定义方式
-
如何在css中实现样式优先级在css中，样式优先级是由一系列规则决定的，这些规则决定了当多个样式规则应用于同一个HTML元素时，哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中，如果你想让超出特定长度的文本显示为三个点（...），你可以使用text-overflow属性，配合overflow和white-space属性。
暂无评论，抢个沙发...