css3之动画

1 2D转换

转换是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

转换可以理解为变形

• 移动：translate
• 旋转：rotate
• 缩放：scale

1.1 2D转换之移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法：

transform:translate(x,y); 或者分开写
transform:translateX(n);
transform:translateY(n);

重点：

• 定义2D转换中的移动，沿着X和Y轴移动元素
• translate最大的优点：不会影响到其他元素的位置
• translate中百分比单位是相对于自身元素的translate:(50%,50%);
• 对行内标签没有效果

1. 我们translate里面的参数是可以用%的

2.如果里面的参数是%移动的距离是 盒子自身的宽度或者高度来对比的

1.2 2D旋转之rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

语法：

transform:rotate(度数)

重点：

• rotate里面跟度数，单位是deg比如rotate(45deg)
• 角度为正时，顺时针，负时，为逆时针
• 默认旋转的中心点是元素的中心点

1.3 2D转换中心点transform-origin

我们可以设置元素的转换中心点

语法：

transform-origin:x y;

重点：

• 注意后面的参数x和y用空格隔开
• x y 默认转换的中心点是元素 的中心点（50% 50%）
• 还可以给x y 设置像素或者方位名词（top bottom left right center）

1.4 2D转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法：

transform:scale(x,y);

注意：

注意其中x和y用逗号分隔

• transform:scale(1,1)：宽和高都放大一倍，相当于没有放大
• transform:scale(2,2)：宽和高都放大了两倍
• transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
• transform:scale(0.5,0.5)：缩小
• scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

2 动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

2.1 动画的基本使用

制作动画分为两步：

1.先定义动画，

2.再使用（调用）动画

动画序列

• 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列。
• 再@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。
• 动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数。
• 请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%。

      @keyframes move {
        /* 开始状态 */
        0% {
          transform: translateX(0px);
        }
        /* 结束状态 */
        100% {
          transform: translateX(1000px);
        }
      }
      div {
         200px;
        height: 200px;
        background-color: pink;
        /* 调用动画 */
        animation-name: move;
        /* 持续时间 */
        animation-duration: 2s;
      }

常用的动画属性：

 动画的简写属性

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

 打字机效果：

      div {
        overflow: hidden;
        font-size: 20px;
        width: 0px;
        height: 30px;
        background-color: pink;
        animation: w 4s steps(10) forwards;
        white-space: nowrap;
      }
      @keyframes w {
        0% {
          width: 0;
        }
        100% {
          width: 200px;
        }
      }

奔跑的小熊：

      div {
        position: absolute;
        width: 200px;
        height: 100px;
        background: url(/images/bear.png) no-repeat;
        animation: bear 1s steps(8) infinite, move linear 4s forwards;
      }
      body {
        background-color: #ccc;
      }
      @keyframes bear {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -1600px 0;
          /* transform: translateX(-50%); */
        }
      }
      @keyframes move {
        0% {
          left: 0;
        }
        100% {
          left: 50%;
        }
      }

3 3D转换

3.1 三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

x轴：水平向右  注意：x右边是正值，左边是负值

y轴：垂直向下  注意：y下面是正值，上面是负值

z轴：垂直屏幕  注意：往外面是正值，往里面是负值

3.2 3D移动translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向

• transform:translateX(100px);仅仅是在x轴上移动
• transform:translateY(100px);仅仅 是在y轴上移动
• transform:translateZ(100px);仅仅是在z轴上移动（注意：translateZ一般用px单位）
• transform:translate3d(x,y,z);其中x、y、z分别指要移动的轴的方向的距离

3.3 透视perspective

 在2D平面产生近大远小视觉立体，但是只是效果二维的

• 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
• 模拟人类的视觉位置，可认为安排一只眼睛去看
• 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小
• 透视的单位是像素

3.4 3D旋转之rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

语法：

• transform:rotateX(45deg):沿着x轴正方向旋转45度
• transform:rotateY(45deg):沿着y轴正方向旋转45度
• transform:rotateZ(45deg):沿着z轴正方向旋转45度
• transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可）

3.5 3D呈现transform-style

• 控制子元素是否开启三维立体环境
• transform-style:flat子元素不开启3d立体空间，默认的
• transform-style:preserve-3d;子元素开启立体空间
• 代码写给父级，但是影响的是子盒子
• 这个属性很重要，后面必用

 3D导航栏案例：

<style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      margin: 100px;
    }
    ul li{
      float: left;
       120px;
      height: 35px;
      margin-right: 20px;
      list-style: none;
      perspective: 500px;
    }
    .box{
      position: relative;
       100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: all .5s;
    }
    .front,.bottom{
      position: absolute;
      top: 0;
      left: 0;
       100%;
      height: 100%;
    }
    .front{
      background-color: pink;
      z-index: 1;
      transform: translateZ(17.5px);
    }
    .bottom{
      background-color: purple;
      transform: translateY(17.5px) rotateX(-90deg);
    }
    .box:hover{
      transform: rotateX(90deg);
    }
  </style>
</head>
<body>
  <ul>
    <li>
      <div class='box'>
        <div class='front'>hello</div>
        <div class='bottom'>world</div>
      </div>
    </li>
  </ul>
</body>

旋转木马案例：

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>Title</title>
  <style>
    body{
      perspective: 740px;
    }
    section {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 300px auto;
      transform-style: preserve-3d;
      animation: rotate 5s linear infinite;
    }
    section:hover{
      animation-play-state: paused;
    }
    @keyframes rotate {
      0%{
        transform: rotateX(0deg);
      }
      100%{
        transform: rotateX(-360deg);
      }
    }
    section div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("dog.jpg") no-repeat;
    }
    section div:nth-child(1){
      transform: translateZ(300px);
    }
    section div:nth-child(2){
      transform: rotateY(60deg) translateZ(300px);
    }
    section div:nth-child(3){
      transform: rotateY(120deg) translateZ(300px);
    }
    section div:nth-child(4){
      transform: rotateY(180deg) translateZ(300px);
    }
    section div:nth-child(5){
      transform: rotateY(240deg) translateZ(300px);
    }
    section div:nth-child(6){
      transform: rotateY(300deg) translateZ(300px);
    }
  </style>
</head>
<body>
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>
</html>