探究CSS3动画：transform/transition/an

2016-11-13 本文已影响0人 HappyAdu

转换（transform）

如大家了解的一样，转换分为2D转换和3D转换。利用CSS3的转换功我们能够对元素进行移动、缩放、转动、拉长或拉伸，并且能结合动画可以实现许多酷炫的效果。

使用转换功能需要使用：

{
    -webkit-transform：；//Chrome Safari
       -moz-transform：；//Firefox
        -ms-transform：；//for IE9
         -o-transform：；//Opera
            transform：；
}

值得注意的是，这里设置之后，其尺寸改变不会影响到别的元素，像是脱离了文档流一样设置了relative，然而在元素上设置margin等属性仍然会在其本来的盒子上影响到文档流别的元素。一言以蔽之，设置transform后未脱离文档流。

2D转换

translate（）——移动
rotate（）——旋转
scale（）——缩放
skew（）——翻转，根据给定的水平线和垂直线参数翻转角度
matrix（）
transform-origin（）

translate（）

元素根据给定的坐标（x，y）位置参数从其位置移动。

注意，其实使用本方法就像设置relative一样，相对于原来位置偏移，且原位置仍然占据空间。

rotate（）

元素顺时针旋转给定角度（正值），逆时针则设置负值。eg：rotate（40deg）

旋转的元素，占据的空间仍然未变，像设置了定位relatvie一样，在此基础上旋转，未脱离文档流。

scale（）

元素的尺寸会根据设置得scale（）方法增加或减少。改变后他可能会覆盖在其他元素上。

如果只宽度或者高度尺寸变化，则可使用scaleX（）或者scaleY（）。

div
{
    -webkit-transform: scale(2,4);  /* Safari 和 Chrome */
    -moz-transform: scale(2,4); /* Firefox */
    -ms-transform: scale(2,4);  /* IE 9 */
    -o-transform: scale(2,4);   /* Opera */
    transform: scale(2,4);
}

skew（）
skew（x-angle，y-angle），沿X，Y偏转角度；
如果只给定一个值，即skew（angle），则会只向X轴偏转，但是我试了这样的写法skew（，angle），结果整个元素都不见了。求大家指教。
如果想只沿一个轴偏转，可以使用skewX（）或者skewY（）。

matrix（）
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

transform-origin（）

transform-origin属性允许您改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y轴。3D 转换元素还能改变其 Z 轴。

语法
transform-origin: x-axis y-axis z-axis;

3D转换

rotateX（）
rotateY（)

需要注意的是：opera不支持3D转换

transition（过渡）

兼容性（不支持IE9及之前版本）

{
    -webkit-transition: width 2s;   /* Safari 和 Chrome */
    -moz-transition: width 2s;  /* Firefox 4 */
    -o-transition: width 2s;    /* Opera */
    transition: width 2s;
}

过渡属性

transtion
transtion-property
transtion-durtion
transtion-timing-function
transtion-delay

如何工作？
SS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：

希望添加效果的CSS属性
效果时长
通常，该属性会结束JS和伪类使用
eg：

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}

动画（animation）

CSS3动画属性

@keyframes——规定动画
animation——所有动画简写属性，除animation-play-state
animation-name——规定@keyframes动画名称
animation-durtion——规定一个动画花费的时间（ms或s），默认0
animation-timing-function——规定动画的速度曲线，默认“ease”
animation-delay——规定动画何时开始，默认0
animation-iteration-count——规定动画播放次数，默认1
animation-direction——规定动画是否在下一周期逆向播放，默认normal
animation-play-state——规定动画是否正在运行或暂定默认“running”
animation-fill-mode——规定对象时间之外的状态

兼容（IE9及之前版本不支持）

    -webkit-animation:动画名;
       -moz-animation:动画名;
         -o-animation:动画名;
            animation:动画名;
    
    
    相应的动画帧：
    @keyframes 动画名
    {

    }

   @-moz-keyframes 动画名 /* Firefox */
    {

    }

  @-webkit-keyframes 动画名 /* Safari 和 Chrome */
   {

   }

  @-o-keyframes 动画名 /* Opera */
  {

  }

众所周知，需在 CSS3 中创建动画，就得学习@keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
那么什么是动画呢？

动画是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数。最好用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。始终定义 0% 和 100% 选择器。能得到最佳的浏览器支持。

animation-timing-function

linear：匀速
ease：低速开始，加快，结束前变慢
ease-in：低速开始
ease-out：低速结束
ease-in-out：低速开始和结束
cubic-bezier（n，n，n）：未知

animation-direction

normal：默认（正向）
alternate：反向

animation-iteration-count

n：播放次数
infinite：无限播放

animation-play-state（）

paused
running

animation-fill-mode

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

动画实例

一个简单的天气预报模型，也是我在微博上看到的，就下载源码研究了一下。供大家学习参考。
HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aimation</title>
    <link rel="stylesheet"  href="weather.css" />
</head>
<body>
    <div class="container">
        <div class="sunny"></div>
        <div class="cloudy"></div>
        <div class="rainy"></div>
        <div class="rainbow"></div>
        <div class="starry"></div>
        <div class="stormy"></div>
        <div class="snowy"></div>
    </div>
</body>
</html>

具体可以前去纯CSS天气预报看看效果和源码。