CSS3两个动画顺序衔接播放

最新推荐文章于 2022-09-20 12:09:05 发布

weixin_34249678

最新推荐文章于 2022-09-20 12:09:05 发布

阅读量2.2k

点赞数 2

文章标签： xhtml

原文链接：http://www.cnblogs.com/tnnyang/p/4721574.html

版权

问题描述：

第一个动画先播放，播放完成后，第二个动画紧接着播放。

解决办法：

1. 将第二个的延迟时间（animation-delay）设置成第一个的持续时间( animation-duration );

2. 多个动画应用时用逗号分隔开;

此时，CSS3的动画代码就要分开写了，不能再简写了，诸如animation:rotate-back 10000ms linear infinite这样的简写就是不行的，因为在同一代码中要加入两个动画，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{
    background:#666;}
img
{
    
position:absolute;left:200px;top:100px;
animation-name:myfirst, rotate-back;
animation-duration:1000ms, 10000ms;
animation-timing-function:linear, linear;
animation-delay:0, 1000ms;
animation-iteration-count:1, infinite;
animation-fill-mode:forwards, none;

最低0.47元/天解锁文章

weixin_34249678

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS3两个动画顺序衔接播放

问题描述：第一个动画先播放，播放完成后，第二个动画紧接着播放。解决办法：1. 将第二个的延迟时间（animation-delay）设置成第一个的持续时间( animation-duration );2.多个动画应用时用逗号分隔开;此时，CSS3的动画代码就要分开写了，不能再简写了，诸如animation:rotate-back 10000ms linear infinite...
复制链接

扫一扫