比较复杂的动画，难以使用一个animation描述，能否分解成多个animation，然后依次执行呢？
经过一番搜索，发现浏览器又强大了，css 中依次执行多个 animation 已经不能算是一个复杂的任务了。
只需要计算好各个动画开始的时间，然后设置好 animation-delay 就可以了。比如下面的例子，将第二个 animation 的 animation-delay 与 第一个 animation 的 animation-duration 设置成一样的。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css animation</title>
<style>
.pan {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
animation: first 5s 1 forwards, second 5s 1 5s;
}
@keyframes first {
from {
top: 0px;
}
to {
top: 100px;
}
}
@keyframes second {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
</style>
</head>
<body>
<div id="ele" class="pan"></div>
</body>最后的效果就是，先向下移动100px，然后转动180度。
如果，借助 js 的话，可以实现的方式就更灵活一些。
比如可以监听动画结束事件，参考文章：《css animation 动画开始事件和结束事件》，在事件结束的时候，开始另一个动画。
也可以使用 setTimeout，同上面的例子一样，设置延迟时间和第一个动画的执行时间一样，然后执行第二个动画。
如果使用了 JQuery ，就可以使用 jQuery 的 animate 方法，既支持动画结束回调，又支持链式操作，使用起来非常方便。
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$('#ele').animate({top:'100px'}, 5000).animate({left: '100px'}, 5000)
});
</script>上面的代码是先向下移动100px，然后向右移动100px。比较遗憾的是 jQuery 的 animate 方法支持的 css 属性有限，有些动画效果无法实现……
-
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属性。
暂无评论，抢个沙发...