CSS篇 动画

于 2016-12-06 17:27:16 发布
阅读量215 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bonnie2012lai/article/details/53489877
版权
本文详细介绍了CSS3中动画属性的使用方法，包括animation-name、animation-duration、animation-timing-function及animation-delay，通过示例展示了如何创建平滑过渡和定时延迟等效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

参考资料：http://isux.tencent.com/css3/index.html?animation-name

1、animation-name

语法：animation-name: none | <identifier> [ , none | <identifier> ]*;定义一个或多个动画名称。


检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 如果提供多个属性值，以逗号进行分隔。

如何开始进行动画
@keyframes相当于一个命名空间，后面跟一个名词，如果在class中的animation-name定义了与之对应的name，那么就可以执行动画了。定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：如：
@-webkit-keyframes demo{
    from{left:0;}
    to{left:400px;}
}
复杂动画：
@-webkit-keyframes demo{
    0%{left:0;}
    50%{left:200px;}
    100%{left:400px;}
}

这里面的百分百有点像flash里帧的概念。表示设置某个时间段内任意时间点的样式。

取值
none：不引用任何动画名称
identifier：定义一个或多个动画名称(identifier标识)

示例：

<!DOCTYPE html>
<html>
<head>							
<meta charset="utf-8">							
<title>实例</title>													
</head>							
<body>							
<style type="text/css">
.demo_box{border:1px solid #3DA5DC;background:#a4dcf9;height:100px;width:200px; text-align:center;color:#fff; }
.animation_name{
    left:0;
    top:100px;
    position:absolute;
    -webkit-animation:0.5s 0.5s ease infinite alternate;
    -webkit-animation-name:demo;
    -moz-animation:0.5s 0.5s ease infinite alternate;
    -moz-animation-name:demo;
}
@-webkit-keyframes demo{
    0%{left:0;}
    100%{left:400px;}
} 
</style>
<div class="demo_box animation_name">看我没事来回跑</div>                                          				        
</body>
</html>

兼容性

IE Firefox Opera Safari Chrome
IE 10+ Firefox 3.5+ 目前暂无版本支持 Safari 10+ Chrome 2.0+

2、animation-duration

语法：animation-duration: <time>[,<time>]*; 指定对象动画的持续时间 。

说明：检索或设置对象动画的持续时间；如果提供多个属性值，以逗号进行分隔。

取值：<time>：正数，单位可以是秒(s)或者毫秒(ms)。默认值为0，表明动画不执行。

<!DOCTYPE html>
<html>
<head>							
<meta charset="utf-8">							
<title>animation name示例</title>		
<script src="./js/jquery-3.1.1.min.js"></script>											
</head>							
<body>							
<style type="text/css">
.demo_box{border:1px solid #3DA5DC;background:#a4dcf9;height:100px;width:200px; text-align:center;color:#fff; }
.animation_duration{
    left:10px;
    top:100px;
    position:absolute;
    -webkit-animation:0.5s ease 1 forwards;
    -webkit-animation-duration:5s;
    -webkit-animation-name:demo;
    -moz-animation:0.5s ease 1 forwards;
    -moz-animation-name:demo;
    -moz-animation-duration:2s;
}
@-webkit-keyframes demo{
    0%{left:10px;}
    100%{left:400px;}
}
</style>
<div class="demo_box animation_duration">我一共运行了2秒钟</div>                                          				        </body>
</html>

兼容性

IE Firefox Opera Safari Chrome
IE 10+ Firefox 3.5+ 目前暂无版本支持 Safari 10+ Chrome 2.0+


3、animation-timing-function

语法：animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) [, linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ]*; 指定对象动画的持续时间 。

说明：检索或设置对象动画的过渡类型；如果提供多个属性值，以逗号进行分隔。

取值：
ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。
linear：线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。
ease-in：渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数。
ease-out：渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数。
ease-in-out：渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数。
step-start：马上转跳到动画结束状态。
step-end：保持动画开始状态，直到动画执行时间结束，马上转跳到动画结束状态。
steps(<number>[, [ start | end ] ]?)：第一个参数number为指定的间隔数，即把动画分为n步阶段性展示，第二个参数默认为end，设置最后一步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，而以animation-fill-mode的设置为动画结束的状态。
cubic-bezier(<number>, <number>, <number>, <number>)：特殊的立方贝塞尔曲线效果。

兼容性

IE Firefox Opera Safari Chrome
IE 10+ Firefox 3.5+ 目前暂无版本支持 Safari 10+ Chrome 2.0+

<!DOCTYPE html>
<html>
<head>							
<meta charset="utf-8">							
<title>animation-timing-function示例</title>		
<script src="./js/jquery-3.1.1.min.js"></script>											
</head>							
<body>							
<style type="text/css">
.demo_box{border:1px solid #3DA5DC;background:#a4dcf9;height:100px;width:200px; text-align:center;color:#fff; }.demo_box{
    -webkit-animation:f1 2s 0.5s forwards;
    -moz-animation:f1 2s 0.5s forwards;
    position:relative;
    left:10px;
    width:50px;
    height:50px;
    border-radius:50px;
    margin:10px 0;
    overflow:hidden;
}
.ease{ 
    -webkit-animation-timing-function:ease;
    -moz-animation-timing-function:ease;
}
.linear{
    -webkit-animation-timing-function:linear;
    -moz-animation-timing-function:linear;
}
.ease-in{
    -webkit-animation-timing-function:ease-in;
    -moz-animation-timing-function:ease-in;
}
.ease-out{
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
}
.ease-in-out{
    -webkit-animation-timing-function:ease-in-out;
    -moz-animation-timing-function:ease-in-out;
}
.step-start{
    -webkit-animation-timing-function:step-start;
    -moz-animation-timing-function:step-start
}
.step-end{
    -webkit-animation-timing-function:step-end;
    -moz-animation-timing-function:step-end;
}
.steps{
    -webkit-animation-timing-function:steps(2);
    -moz-animation-timing-function:steps(2)
}
.cubic-bezier{
    -webkit-animation-timing-function:cubic-bezier(0.52,0,0.58,1.0);
    -moz-animation-timing-function:cubic-bezier(0.52,0,0.58,1.0);
}
@-webkit-keyframes f1{
    0%{left:10px;}
    100%{left:500px;}
}
@-moz-keyframes f1{
    0%{left:10px;}
    100%{left:500px;background:#f00}
}                        
                        </style>
<div class="demo_box ease">ease</div>
<div class="demo_box linear">linear</div>
<div class="demo_box ease-in">ease-in</div>
<div class="demo_box ease-out">ease-out</div>
<div class="demo_box ease-in-out">ease-in-out</div>
<div class="demo_box step-start">step-start</div>
<div class="demo_box step-end">step-end</div>
<div class="demo_box steps">steps(2)</div>
<div class="demo_box cubic-bezier">cubic-bezier(0.52,0,0.58,1.0)</div>                                      				        </body>
</html>
4、animation-delay

语法：animation-delay: <time>; 指定对象动画延迟执行的时间 。

说明：设置动画延迟执行的时间。
默认值0表示立即执行，正数为动画延迟一定时间，负数为截断一定时间内的动画。单位为秒(s)或毫秒(s)。

取值：0：不延迟，立即执行。正数：按照设置的时间延迟。负数：设置时间前的动画将被截断。

兼容性

IE Firefox Opera Safari Chrome
IE 10+ Firefox 3.5+ 目前暂无版本支持 Safari 10+ Chrome 2.0+

bonnie2012lai
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值