解析css3属性——动画

来源：互联网发布：c语言获取当前时间编辑：程序博客网时间：2024/05/16 06:43

Css3的动画属性主要有transition（过度）和动画（animation）

一、属性解析

Transition下的属性，支持的浏览器有Internet Explorer 10、Firefox、Chrome 以及 Opera。属性可以省略一起写，也可以分开申明属性值;

例如：1、-webkit-transition:width 2s…

2、 -webkit-transition-property:width;

-webkit-transition-duration:2s’

所有属性：

transition-property: 用于动画的css属性，例如：width，height，background；

transition-duration: 过度花费时间，默认0；

transition-timing-function:过度的时间曲线，默认ease，还有如下属性；

linear

规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

ease

规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

Ease-in

规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out

规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out

规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n)

在 cubic-bezier函数中定义自己的值。可能的值是 0至 1之间的数值

Transition-delay:

过度效果何时开始，延迟时间

动画：

div{width:100px;height:100px;background:red;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */}@keyframes myfirst{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}}

animation 属性

Animation-name:动画名称：

Animation-duration:完成一个周期所花费的时间

transition-timing-function:过度的时间曲线，默认ease，还有如下属性；

linear

规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

ease

规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

Ease-in

规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out

规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out

规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n)

在 cubic-bezier函数中定义自己的值。可能的值是 0至 1之间的数值

Transition-delay:

过度效果何时开始，延迟时间

Animation-iteration-count: 规定被播放的次数；n指定次数；infinite无限次数播放

Animation-direction: 是否在下一周期逆向播放；normal默认正常播放；alternate轮流反向播放；

Animation-play-state:是否正在运行和暂停；paused暂停；running正在播放；

Animation-fill-mode:动画时间之外状态;有如下

none

不改变默认行为。

Forwards

当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards

在 animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both

向前和向后填充模式都被应用。

@keyframes 规则
：创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，您可以更改CSS样式的设定多次。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同.0%是开始，100%动画完成

二、综合运用的例子

首先创建一个demo.html网页：

       <!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <link rel="stylesheet" type="text/css" href="demo.css">    <title></title></head><body> <div class="dd">这是一个边框像素值</div>   </body></html>

然后编写demo.css文件完成动画：

.dd{width: 100px;height:100px; background:red; padding:15px; text-align:center; position:absolute; border-radius: 2em; top:20px;     -webkit-animation:myfirst;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:forwards;}.dd:hover{width:200px;height:200px;}@keyframes myfirst{0% {-webkit-transition:width 2s; background:green;}50% {-webkit-transition:height 2s;background:purple;}75% {transform:rotate(0deg) translate(100px); background:yellow;}100%{transform:rotate(360deg) translate(100px);background:pink;}}

1 0