CSS3----动画animation

来源：互联网发布：拆分盘源码下载编辑：程序博客网时间：2024/06/06 01:04

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-

注释：Internet Explorer 9，以及更早的版本不支持

属性：

属性描述CSS@keyframes规定动画。3animation所有动画属性的简写属性，除了 animation-play-state 属性。3animation-name规定 @keyframes 动画的名称。3animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。 4s3animation-timing-function规定动画的速度曲线。默认是 "ease"。如下示1 3animation-delay规定动画何时开始。默认是 0。可以为负数，为跳过3animation-iteration-count规定动画被播放的次数。默认是 1。为无限： infinite3animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。反流播放：alternate3animation-play-state规定动画是否正在运行或暂停。默认是 "running"。已停止：paused3animation-fill-mode规定对象动画时间之外的状态。如下示2 3

animation-timing-function：如示1

值描述测试linear动画从头到尾的速度是相同的。测试ease默认。动画以低速开始，然后加快，在结束前变慢。测试ease-in动画以低速开始。测试ease-out动画以低速结束。测试ease-in-out动画以低速开始和结束。测试cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-fill-mode：如示2

值描述none不改变默认行为。forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。backwards在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。both向前和向后填充模式都被应用。

动画名：myfirst，全写

div{animation-name: myfirst;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;animation-play-state: running;  -moz-animation-name: myfirst;   /* Firefox */-moz-animation-duration: 5s;-moz-animation-timing-function: linear;-moz-animation-delay: 2s;-moz-animation-iteration-count: infinite;-moz-animation-direction: alternate;-moz-animation-play-state: running; -webkit-animation-name: myfirst;   /* Safari 和 Chrome */-webkit-animation-duration: 5s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running;-o-animation-name: myfirst;   /* Opera */-o-animation-duration: 5s;-o-animation-timing-function: linear;-o-animation-delay: 2s;-o-animation-iteration-count: infinite;-o-animation-direction: alternate;-o-animation-play-state: running;}

动画名：myfirst，简写

div{animation: myfirst 5s linear 2s infinite alternate;-moz-animation: myfirst 5s linear 2s infinite alternate;    /* Firefox: */-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Safari 和 Chrome: */-o-animation: myfirst 5s linear 2s infinite alternate;      /* Opera: */}

@keyframes 创建规则

规定某项 CSS 样式，写法1：注：可以按任一百分比（0%，25%，50%，75%，100%）

@keyframes myfirst{0%   {background:red; left:0px; top:0px;}100%  {background:blue; left:200px; top:200px;}}@-moz-keyframes myfirst /* Firefox */{0%   {background:red; left:0px; top:0px;}100%  {background:blue; left:200px; top:200px;}}@-webkit-keyframes myfirst /* Safari and Chrome */{0%   {background:red; left:0px; top:0px;}100%  {background:blue; left:200px; top:200px;}}@-o-keyframes myfirst /* Opera */{0%   {background:red; left:0px; top:0px;}100%  {background:blue; left:200px; top:200px;}}

规定某项 CSS 样式，写法2：注：from - to 同等于0% -- 100%

@keyframes myfirst{from   {background:red; left:0px; top:0px;}to  {background:blue; left:200px; top:200px;}}@-moz-keyframes myfirst /* Firefox */{from   {background:red; left:0px; top:0px;}to  {background:blue; left:200px; top:200px;}}@-webkit-keyframes myfirst /* Safari and Chrome */{from   {background:red; left:0px; top:0px;}to  {background:blue; left:200px; top:200px;}}@-o-keyframes myfirst /* Opera */{from   {background:red; left:0px; top:0px;}to  {background:blue; left:200px; top:200px;}}

0 0