小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
  • html5弹性布局display:flex;的具体用法

    html5弹性布局display:flex;的具体用法

    首先我们来了解一下flex的定义:Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。在我们开发网站的时候,碰见如下图两边对齐的时候回很头疼,不管是用cl……
    401人已经看过了
您的位置:首页 > 前端开发 > Htm l+ Css > Html5 + Css3

CSS3动画属性animation实例展示

分类: Html5 + Css374个赞

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