CSS3 动画

在写页面的时候，我们经常会需要实现一些动画效果，从而来提升交互度，使页面美观并且好用。实现一些复杂动画我们会用到JavaScript；但如果只是简单的切换，实现一些小的交互效果时，我们可以使用css动画。举个例子，无限轮播图功能就可以使用css动画来实现。下面我会介绍一下css动画的几个模块，阐述关键的属性，并且放一些小例子。

过渡模块（transition）

transition 通常用于做过渡动画; 我的使用方法是，先写好基本界面样式，然后写好过渡以后期望的样式，最后给对应的元素添加过渡。
transition-property: 哪个属性需要执行过渡效果；默认值为all；
transition-duration：过渡效果持续的时长；默认值为0；
transition-delay: 延迟多少秒之后开始执行过渡动画；默认值为0；
transition-timing-function: 控制过渡动画的速度；默认值为ease；
一共有5个值分别是：
匀速 linear；逐渐慢下来 ease；加速 ease-in；减速 ease-out ；先加速后减速 ease-in-out;
transition 属性连写顺序：transition: property duration timing-function delay; 连写的时候可以省略后面两个参数。
Example：

 div {
   width: 100px;
   height: 100px;
   background-color: rgb(247, 215, 237);
   <!-- 多个属性需要同时执行过渡效果时，用逗号分隔。-->
   transition-property: width, background-color;
   transition-duration: 5s, 5s;
   transition-delay: 1s;
   <!-- 过渡连写：transition: width 5s, background-color 5s linear 0s; -->
 }

 div:hover {
   width: 300px;
   background-color: rgb(241, 124, 204);
 }

2D/3D 转换模块（transform）

transform 有3个值，分别是：旋转 rotate(); 平移 translate(); 缩放scale();

平移

第一个参数: 水平方向；第二个参数:垂直方向。
用法： transform: translate(-100px, 0px)

缩放

如果取值是1，代表不变；大于1则放大，小于1则缩小。如果水平和垂直缩放都一样，可以简写为一个参数。
用法： transform: scale(1.5, 1) ； transform: scale(2)

旋转

用法： transform: rotate(45deg)，其中deg为单位。
Example：

效果

<head>
   ... ...
   <style>
        ul {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            position: relative;
        }

        ul li {
            list-style: none;
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }

        ul li:nth-child(1){
            background: yellow;
            transform: rotate(30deg);
        }

        ul li:nth-child(2){
            background: orange;
            transform: rotate(50deg);
        }

        ul li:nth-child(3){
            background: pink;
            transform: rotate(70deg);
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

transform-origin 形变中心点
默认情况下，所有的元素都是以自己的中心点作为参考来旋转的。可以通过transform-origin属性来修改它的参考点。取值可以是：
像素： transform-origin: 0px 0px 水平0 垂直0 则中心点为左上角；
百分比： transform-origin: 50% 50% 为中心点；
特殊关键字： transform-origin: left top 为左上角；
Example：
在上面例子的代码中的 ul li 中添加一句更改中心点的代码，效果就会完全不一样。

中心点修改后的效果

...
ul li {
  list-style: none;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0px 0px;
}
...

旋转轴向
3D transform中有下面这三个方法 (在默认情况下，所有元素都是围绕z轴旋转的。)：
围绕x轴旋转: rotateX(30deg)
围绕y轴旋转: rotateY(30deg)
围绕z轴旋转: rotateZ(30deg)

透视属性 (perspective)
实现近大远小的效果，值越大效果越弱；
透视属性有2种使用方式，第一种是用在动画元素门的共同父辈元素，即在其父元素上使用这个属性；第二种则是直接用在当前的动画元素上，与transform的其他属性写在一起。这两种方式的结果是不同的。

.father {
  perspective: 200px;
}
/*第二种形式*/
.father .child1 {
  transform: perspective(200px) rotateY(30deg);
}

Example：
以下所有的例子是perspective在父元素上的视角。

围绕y轴旋转，添加透视属性后的效果

ul {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  margin: 100px auto;
  position: relative;
  perspective: 200px;
}

ul li {
  list-style: none;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
   transform-origin: 0px 0px;
}

ul li:nth-child(1){
  background: orange;
  transform: rotateY(30deg);
}

transform-style: preserve-3d
transform-style属性在实现3D效果的时候是必须添加的属性。默认值为 flat (表示平面效果)； preserve-3d 表示3D效果。
注意：这个属性必须应用在3D变换的兄弟元素们的父元素上。

盒子阴影和文字阴影

给盒子添加阴影
顺序：水平偏移 / 垂直偏移 / 模糊度 / 阴影扩展 / 阴影颜色 / 内外阴影（有inset 代表框内阴影，不带inset 代表框外阴影，默认是外阴影）
box-shadow: h-shadow v-shadow blur spread color inset;
例子：box-shadow: 10px 10px 10px 0px pink inset;
快速添加阴影只需要给3个参数：水平，垂直，以及模糊度。
box-shadow: 10px 10px 10px;

给文字添加阴影
顺序：水平偏移垂直偏移模糊度阴影颜色（不支持内外阴影）
text-shadow: 10px 10px 5px blue;
Example：

效果

<html>
<head>
    ... ...
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: rgb(250, 207, 214);
            margin: 0 auto;
            box-shadow: 10px 10px 10px 0px rgb(179, 100, 113);
        }
        
        div p {
            color: rgb(156, 156, 156);
            text-align: center;
            font-size: 24px;
            text-shadow: 10px 10px 5px;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div>
        <p>仙女萝</p>
    </div>
</body>
</html>

动画模块

与过渡不同的是，过渡必须人为的触发才会执行动画，动画不需要人为的触发就能执行。
满足以下3点，就能看到最基本的动画效果了。
动画三要素：
需要执行哪个动画(animation-name)；
需要自己创建一个名称叫做 xxx 动画 (@keyframes xxx)；
动画持续的时长(animation-duration);
Example:

div {
    width: 50px;
    height: 50px;
    background: pink;
    animation-name: xxx; 
    animation-duration: 3s;    
}
 
@keyframes xxx {
    from{
        margin-left: 0;
    }
    to {
        margin-left: 500px;
    }
}

动画属性

animation-delay: 多少秒之后开始执行动画，默认是0；
animation-timing-function: 控制动画的速度，默认是 ease；
animation-iteration-count: 动画播放的次数，默认播放次数为1次；【值：可以是具体数字，也可以是关键词，例如： infinite】
animation-direction：是否需要做往返动画，默认为normal；【值：normal, alternate】
animation-play-state: 当前动画是否需要暂停，默认为running；【值：running, paused】
animation-fill-mode: 用于指定动画开始之前的状态和结束状态的样式；【值：none, forwards (结束状态保持动画最后一帧的样式)， backwards(等待状态时显示动画第一帧), both】

动画的第二种方式

除了上面例子里写的使用关键词"from"，"to"，还可以使用百分比来规定变化发生的时间 (0% ~ 100%)。
Example

div {
  width: 100px;
  height: 50px;
  background-color: pink;
  position: absolute;
  left: 0;
  top: 0;
  animation-name: sun;
  animation-duration: 5s;
}

@keyframes roundTwo {
  0% {
    left: 0;
    top: 0;
  }
  25% {
    left: 300px;
    top: 0;
  }
  50% {
    left: 300px;
    top: 300px;
  }
  75% {
     left: 0;
     top: 300px;
  }
  100% {
    left: 0;
    top: 0;
  }
}

动画模块连写格式

animation: name, duration, timing-function, delay, count, direction;