关于小米
27岁，山西运城人，职业电商经理人，前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发，等相关电商工作，经验较为丰富，小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]
E-mail:mzze@163.com
Q Q:32362389
W X:xiaomi168527
关于王飞
27岁，山西运城人，职业电商经理人，网络工程师兼运维，从事过运营商网络建设，企业网络建设、优化。数据中心网络维护等通过，经验丰富，座右铭：当自己休息的时候，别忘了别人还在奔跑。 ...[更多]
关于小艳
大于花一样的年龄，河南郑州是我家，2010年在北京接触团购网，2011年进入天猫淘宝一待就是四年，如今已经将设计走向国际化（ps:误打误撞开始进入阿里巴巴国际站的设计，嘿嘿）五年电商设计，丰富经验，从事过天猫淘宝阿里各项设计，店铺运营，产品拍摄；我将我的经历与您分享是我的快乐！座右铭：越努力越幸运！ ...[更多]
E-mail:97157726@qq.com
Q Q:97157726
css3的强大相信大家已经认识到，其动画属性animation更是将之前必须flash和js才能实现的效果通过css3也可以实现
animation属性兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
下面让我们看下例子。
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS3动画属性animation详细介绍</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
div{float:left;margin-right:2%;margin-bottom:2%;text-align:center;}
.body{clear:both;float:none;text-align:left;}
.shuxing{text-align:left;}
.shuxing span {color:#2480C5;font-weight: 700;}
.shuxing a{color:#2480C5;}
.a{width:200px;height:200px;background:red;position:relative;
animation: a 2s;
-moz-animation: a 2s; /* Firefox */
-webkit-animation: a 2s; /* Safari 和 Chrome */
-o-animation: a 2s;/* Opera */
}
@keyframes a{
from {background:red;}
to {background:yellow;}
}
.b{width:200px;height:200px;background:red;position:relative;
animation: ab 3s;
-moz-animation: ab 3s; /* Firefox */
-webkit-animation: ab 3s; /* Safari 和 Chrome */
-o-animation: ab 3s;/* Opera */
}
@keyframes ab{
25% {background:yellow;}
50% {background:red;}
75%{background:blue;}
100%{background:green;}
}
.c{width:200px;height:200px;background:red;position:relative;
animation: c 3s;
-moz-animation: c 3s; /* Firefox */
-webkit-animation: c 3s; /* Safari 和 Chrome */
-o-animation: c 3s;/* Opera */
animation-iteration-count:infinite;
}
@keyframes c{
25% {background:yellow;}
50% {background:red;}
75%{background:yellow;}
100%{background:red;}
}
.d{width:200px;height:200px;background:red;position:relative;
animation:d 5s infinite;
animation-timing-function:linear;
/* Safari and Chrome */
-webkit-animation:d 5s infinite;
-webkit-animation-timing-function:ease-out;
}
@keyframes d{
50% {background:yellow;}
}
.e{width:200px;height:200px;background:red;position:relative;
animation:e 5s infinite;
animation-timing-function:linear;
animation-delay:3s;
-webkit-animation-delay:3s;
}
@keyframes e{
50% {background:yellow;}
}
.f{width:200px;height:200px;background:red;position:relative;
animation:f 5s infinite;
animation-timing-function:linear;
animation-direction:alternate;
}
@keyframes f{
30% {background:yellow;}
60%{background:purple;}
}
.g{width:200px;height:200px;background:red;position:relative;
animation:g 5s infinite;
animation-timing-function:linear;
animation-direction:alternate;
animation-play-state:paused;
}
@keyframes g{
30% {background:yellow;}
60%{background:purple;}
}
.g:hover{animation-play-state:running;}
.h{width:200px;height:200px;background:red;position:relative;
animation:h 5s 2;
animation-fill-mode:forwards;
}
@keyframes h{
30% {background:yellow;}
100%{background:purple;}
}
.i{width:200px;height:200px;background:red;position:relative;
animation:h 5s 2;
animation-fill-mode:backwards;
}
@keyframes i{
30% {background:yellow;}
100%{background:purple;}
}
.j{width:430px;height:200px;background:red;position:relative;
-webkit-animation:j 3s ease-in 3 alternate both;
}
@keyframes j{
30% {background:yellow;}
100%{background:purple;}}
</style>
</head>
<body>
<div class="a"><p>a</p>循环一次，2个色<p>@keyframes a{
from {background:red;}
to {background:yellow;}
}</p></div>
<div class="b"><p>b</p>循环三次，4个色<p>animation-iteration-count:3;</p></div>
<div class="c"><p>c</p>无限循环，4个色<p>animation-iteration-count:infinite;</p></div>
<div class="d"><p>d</p>动画高速开始<p>animation-timing-function:linear;</p></div>
<div class="e"><p>e</p>动画3S后开始<p>animation-delay:3s;</p></div>
<div class="f"><p>f</p>动画播放完后倒会播放<p>animation-direction:alternate;</p></div>
<div class="g"><p>g</p>默认暂停,鼠标放上开始动<p>animation-play-state:paused;</p></div>
<div class="h"><p>h</p><p>animation-fill-mode:forwards</p>动画运行2次完成后，回到结束时的状态</div>
<div class="i"><p>i</p><p>animation-fill-mode:backwards;</p>动画运行2次完成后，回到开始时的状态</div>
<div class="j"><p>j</p>animation-fill-mode:both；的状态和animation-direction的值（是否逆向播放）以及animation-iteration-count的值有关（播放次数）；animation-direction的值为alternate；播放次数为2那么其最后回带到开始状态，如果播放次数为3，那么最后回到结束状态</div>
<div class="body">
<h2>animation简写</h2>
<h3>animation:【自定义属性】【完成一个周期需要的秒数】【动画速度曲线】【 播放次数】【是否逆向播放】【动画停止时的状态】【默认是否暂停</h3>
<h3>animation:【animation-name】【animation-duration】【animation-timing-function】 【animation-delay】【animation-iteration-count】【animation-direction 】【animation-fill-mode】【animation-play-state】</h3>
<h2>实例</h2>
<p>animation:ceshi 5s ease-in 2 alternate both;</p>
<p>-webkit-animation:ceshi 5s ease-in 2 alternate both;/* Safari 和 Chrome */</p>
@keyframes ceshi
{
from {left:0px;}
to {left:200px;}
}
<br />
@-webkit-keyframes ceshi /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
<p style="color:red;">running是默认值，所以animation-play-state的值可不写</p>
</div>
<div class="shuxing">
<h2>各属性值</h2>
<h4>animation-name（动画名称）</h4>自定义即可<br />
<h4>animation-duration(完成一个周期所花费的秒或毫秒)</h4>3s;200ms等默认值是0<br />
<h4>animation-timing-function:</h4>
<span>linear</span>动画从头到尾的速度是相同的<br />
<span>ease </span>默认动画以低速开始，然后加快，在结束前变慢。 <br />
<span>ease-in </span>动画以低速开始。<br />
<span>ease-out</span> 动画以低速结束。 <br />
<span>cubic-bezier(n,n,n,n) </span>cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值;cubic-bezier.com ;<a href="http://cubic-bezier.com/" target="_blank" />点击在线编辑cubic-bezier 函数</a><br />
<h4>animation-delay规定动画何时开始</h4>2s。默认是 0<br />
<h4>animation-iteration-count 规定动画被播放的次数</h4>
3 ;。默认是 1<br />
<h4>animation-direction规定动画是否在下一周期逆向地播放</h4>
默认是 "<span>normal</span>"<br />
<span>alternate</span> 动画轮流反向播放。<br />
<h4>animation-play-state 规定动画是否正在运行或暂停</h4>
<span>paused</span>暂停。默认是 "<span>running</span>"。<br />
<h4>animation-fill-mode:规定对象动画时间之外的状态;</h4>
默认值为<span>none</span><br />
<span>forwards</span> 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。<br />
<span>backwards</span>在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）<br />
<span>both</span>向前和向后填充模式都被应用。
</div>
</body>
</html>
本站内容均为小米原创，转载请注明出处：小米技术社区>> CSS3动画属性animation实例展示