CSS3中的动画效果记录 - html/css语言栏目：html.cs

今天要记录的是CSS3中的三种属性transform、transition以及animation，这三个属性大大提升了css处理动画的能力。   一、Transform 变形   　　CSS中transform 属性允许你修改CSS可视化模型的坐标控件。使用transform，元素可以安装设定的值变形、旋转、缩放、倾斜。   　　语法：      transform ： none | <transform-function> [ <transform-function> ]*     也就是：    transform: rotate | scale | skew | translate |matrix; 　　对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。   　   　　在IE9中，使用jQuery动态添加样式，不显示效果，其他 浏览器显示正常。是因为IE9认为 -ms-transform是无效的脚本，不执行。请将 "-ms-transform"改为“msTransform”。   　　这里介绍一个在线调试CSS3的工具，http://westciv.com，这个工具还可以调试Gradients、Shadows等属性。   　　1、transform-origin属性   　　transform的参照点默认为元素的中心点，如果要改变这个参照点，可以是用transform-origin属性进行自定义。受影响变形函数：rotate()、scale()、skew()、matrix()。语法：   transform-origin: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]  　　       　　2、旋转rotate   　　从原点(由transform-origin属性指定)开始安装顺时针方向旋转元素一个特定的角度。   旋转30度，transform-origin为默认值 旋转30度，transform-origin为left，top       复制代码 .rotate{     -webkit-transform:rotate(30deg);     -moz-transform:rotate(30deg);     -o-transform:rotate(30deg);     -ms-transform:rotate(30deg);     transform:rotate(30deg); } .transform_left_top{     -webkit-transform-origin:left top;     -moz-transform-origin:left top;     -o-transform-origin:left top;     -ms-transform-origin:left top;     transform-origin:left top; } 复制代码  　　3、移动translate    　　移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）   x轴移动50px，y轴移动20px   transform-origin为默认值   x轴移动50px，y轴移动20px   transform-origin为left，top     　　设置transform-origin与不设置不影响移动。   复制代码 .translate{     -webkit-transform:translate(50px,20px);     -moz-transform:translate(50px,20px);     -o-transform:translate(50px,20px);     -ms-transform:translate(50px,20px);     transform:translate(50px,20px); } 复制代码  　　4、缩放scale   　　缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。   scale(1.5,1)   transform-origin为默认值   scale(1.5,1)   transform-origin为left，top     复制代码 .scale{     -webkit-transform:scale(1.5,1);     -moz-transform:scale(1.5,1);     -o-transform:scale(1.5,1);     -ms-transform:scale(1.5,1);     transform:scale(1.5,1); } 复制代码  　　5、扭曲skew   　　扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）   skew(30deg, 10deg)   transform-origin为默认值   skew(30deg, 10deg)   transform-origin为left，top     复制代码 .skew{     -webkit-transform:skew(30deg, 10deg);     -moz-transform:skew(30deg, 10deg);     -o-transform:skew(30deg, 10deg);     -ms-transform:skew(30deg, 10deg);     transform:skew(30deg, 10deg); } 复制代码 　　6、矩阵matrix   　　matrix(<number>, <number>, <number>, <number>, <number>, <number>) ： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，matrix矩阵是transform变换的基础，可以应付很多高端的效果，算是一种高级应用技巧。网上有专门介绍这个的用法，我这里就不详细介绍了。有个在线编辑matrix的网站，useragentman.com。可以在线调试，下图所示：        w3school在线测试：   值 描述 测试 none   定义不进行转换。 测试 matrix(n,n,n,n,n,n)   定义 2D 转换，使用六个值的矩阵。 测试 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)   定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate(x,y)   定义 2D 转换。 测试 translate3d(x,y,z)   定义 3D 转换。 translateX(x)   定义转换，只是用 X 轴的值。 测试 translateY(y)   定义转换，只是用 Y 轴的值。 测试 translateZ(z)   定义 3D 转换，只是用 Z 轴的值。 scale(x,y)   定义 2D 缩放转换。 测试 scale3d(x,y,z)   定义 3D 缩放转换。 scaleX(x)   通过设置 X 轴的值来定义缩放转换。 测试 scaleY(y)   通过设置 Y 轴的值来定义缩放转换。 测试 scaleZ(z)   通过设置 Z 轴的值来定义 3D 缩放转换。 rotate(angle)   定义 2D 旋转，在参数中规定角度。 测试 rotate3d(x,y,z,angle)   定义 3D 旋转。 rotateX(angle)   定义沿着 X 轴的 3D 旋转。 测试 rotateY(angle)   定义沿着 Y 轴的 3D 旋转。 测试 rotateZ(angle)   定义沿着 Z 轴的 3D 旋转。 测试 skew(x-angle,y-angle)   定义沿着 X 和 Y 轴的 2D 倾斜转换。 测试 skewX(angle)   定义沿着 X 轴的 2D 倾斜转换。 测试 skewY(angle)   定义沿着 Y 轴的 2D 倾斜转换。 测试 perspective(n)   为 3D 转换元素定义透视视图。 二、Transition过渡   　　W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”   语法：   复制代码 transition ： [<'transition-property'> ||      <'transition-duration'> ||      <'transition-timing-function'> ||     <'transition-delay'>      [,         [   <'transition-property'> ||              <'transition-duration'> ||              <'transition-timing-function'> ||              <'transition-delay'>         ]     ]*                          复制代码 属性 说明 transition-property   规定设置过渡效果的 CSS 属性的名称。 transition-duration   规定完成过渡效果需要多少秒或毫秒。 transition-timing-function   规定速度效果的速度曲线。 transition-delay   定义过渡效果何时开始。 　   　　1、transition-property   　　transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型，大家可以点这里了解详情。   　　2、transition-duration   　　transition-duration是用来指定元素 转换过程的持续时间，取值：<time>为数值，单位为s（秒）或者ms(毫秒),可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是变换时是即时的。   　　3、transition-timing-function   　　transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：   ease   （逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) linear   （匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease-in   （加速），ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out   （减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out   （加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) cubic-bezier   （该值允许你去自定义一个时间曲线）可以使用工具网站来定制 　　cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default   　　   　　其他几个属性的示意图：   　　   　　4、transition-delay   　　transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：<time>为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认大小是"0"，也就是变换立即执行，没有延迟。       下面做个简单事例，在移到方块的时候，将方块的width增加   :hover之前 :hover之后   复制代码 .a_border{     display:block;     width:80px;     background:#e0e0e0;     text-align:center;     line-height:80px } a.a_border:hover{     width:150px;     -webkit-transition:width 0.5s linear 1s;     -moz-transition:width 0.5s linear 1s;     -o-transition:width 0.5s linear 1s;     -ms-transition:width 0.5s linear 1s;     transition:width 0.5s linear 1s; } 复制代码 三、Animation动画   　　通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3的Animation是由“keyframes”这个属性来实现动画效果，Keyframes可以指定任何顺序排列来决定Animation动画变化的关键位置。可以在这个Tencent网站上面做在线的动画调试。   　　各自的语法：   animation：<single-animation-name> || <time> ||  　　　　　　<timing-function> || <time> ||  　　　　　　<single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>  keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';  keyframes-blocks: [ keyframe-selectors block ]* ;  keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;             属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0，意味着没有动画效果。 3 animation-timing-function 规定动画的速度曲线。默认是 "ease"。   还有linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)   3 animation-delay 规定动画何时开始。默认是 0。 3 animation-iteration-count 规定动画被播放的次数。默认是 1。下面是其他值：   "infinite"：规定动画应该无限次播放   3 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。下面是其他值：   "alternate"：动画应该轮流反向播放   "reverse"：动画反向运行,方向始终与normal相反。（FF14.0.1以下不支持）   "alternate"：动画会循环正反方向交替运动，奇数次（1、3、5……）会正常运动，偶数次（2、4、6……）会反向运动，即所有相关联的值都会反向。   "alternate-reverse"：动画从反向开始，再正反方向交替运动，运动方向始终与alternate定义的相反。（FF14.0.1以下不支持）   3 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"   "paused"是指规定动画已暂停   3 animation-fill-mode 规定对象动画时间之外的状态。   "forwards"指当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）   "backwards"指在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）   "both"指向前和向后填充模式都被应用   3 看一个实例：   这句话I am moving将会在左右来回移动，并且在执行到一半的时候字体放大。           复制代码 .animation1{     -moz-animation-duration: 3s;     -moz-animation-name: slidein;     -moz-animation-iteration-count: infinite;     -moz-animation-direction: alternate;          -webkit-animation-duration: 3s;     -webkit-animation-name: slidein;     -webkit-animation-iteration-count: infinite;     -webkit-animation-direction: alternate;          -o-animation-duration: 3s;     -o-animation-name: slidein;     -o-animation-iteration-count: infinite;     -o-animation-direction: alternate;          -ms-animation-duration: 3s;     -ms-animation-name: slidein;     -ms-animation-iteration-count: infinite;     -ms-animation-direction: alternate;          animation-duration: 3s;     animation-name: slidein;     animation-iteration-count: infinite;     animation-direction: alternate; } @keyframes slidein {     from {margin-left:100%;width:300%}     50% {font-size: 300%;margin-left: 25%;width: 150%;}     to {margin-left:0%;width:100%;} } @-moz-keyframes slidein {     from {margin-left:100%;width:300%}     50% {font-size: 300%;margin-left: 25%;width: 150%;}     to {margin-left:0%;width:100%;} } @-webkit-keyframes slidein {     from {margin-left:100%;width:300%}     50% {font-size: 300%;margin-left: 25%;width: 150%;}     to {margin-left:0%;width:100%;} } @-o-keyframes slidein {     from {margin-left:100%;width:300%}     50% {font-size: 300%;margin-left: 25%;width: 150%;}     to {margin-left:0%;width:100%;} @-ms-keyframes slidein {     from {margin-left:100%;width:300%}     50% {font-size: 300%;margin-left: 25%;width: 150%;}     to {margin-left:0%;width:100%;} }