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实例展示