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属性。
暂无评论,抢个沙发...