CSS3 动画学习笔记

CSS3综合部分

2D转换(transform)

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放

位移(改变元素位置)

• translate(x,y)

  定义 2D 转换，沿着 X 和 Y 轴移动元素。
  例如:
  .box {
      transform: translate(100px, 200px);
  }
  使用方式介绍: 
      基本写法: 
          transform:  translate(length, length); 
          总结: 
          1. 最多能设置两个值, 一个值用来改变水平,另外一个一个值用来改变垂直方向
  
          2. 如果设置两个值,第一个值代表水平,第二值代表垂直
  
          3. 如果希望让元素逆方向移动,可以设置负数
  
          4. 通过位移方式改变元素位置,设置的值就是相对元素本身宽度和高度(可以设置百分比)
  
          5. 如果设置一个值,那么元素只能在水平方向移动

• 2D位移方式实现定位元素居中

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

旋转

• rotate(angle)

  定义 2D 旋转，在参数中规定角度。
  基本使用:
      transform: rotate(angle)
      总结: 
          1. 设置的值代表旋转的角度(单位deg)
          2. 通过设置正负数的方式,控制元素顺时针(正数)或者逆时针旋转(负数)
          3. 可以通过transform-origin改变元素的旋转点位置(倾斜),默认值是center
             ✔ 设置方式可以使用以下方式:
               transform-origin: left bottom; 
               transform-origin: 100px 100px;
  例如:
      transform: rotate(-45deg);

• 总结

  1. 旋转圆点 
  2. 顺时针旋转,逆时针旋转

缩放(改变元素大小)

• scale(x,y)

  定义 2D 缩放转换，改变元素的宽度和高度。

• 总结

  基本使用方式: 
      transform: scale(0, 0);
  
      总结: 
      1. 最多能设置两个值,一个值用来改变宽度,另外一个值用来改变 高度
      2. 设置缩放的时候,不需要带单位,代表的是倍数
      3. 第一个值代表宽度,第二个值代表高度
      4. 如果希望元素缩小,那么设置的值在 0 - 1 之间的小数
      5. 如果设置一个值,代表元素宽度和高度同时放大或者缩小相应的倍数

倾斜(了解)

• skew(x-angle,y-angle)

  定义 2D 倾斜转换，沿着 X 和 Y 轴。

• 总结

  
  注意: transform 是一个复合属性,如果设置多个值,那么需要按照复合属性的写法去写;  
  
  transform:  translate(600px)  rotate(360deg) scale(0.5, 0.5);

3D转换(transform)

3D坐标系

☞ 坐标系:
   x 轴 : 从左向右

   y 轴: 从上向下

   z 轴: 指向我们自己的眼睛

☞ 左手法则:

位移

• translateX(n)

   让元素沿着x轴移动
   正数: 从左向右
   负数: 从右向左

• translateY(n)

  让元素沿着Y轴移动
  正数: 从上向下
  负数: 从下向上

• translateZ(n)

  让元素沿着Z轴移动
  正数: 朝向我们视线移动
  负数: 背向移动
  总结:
       1. 3D转换中同样可以设置百分比,依然相对元素自己宽度和高度
       2. 可以通过3D转方式实现元素居中:
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translateX(-50%) translateY(-50%);

• 3D透视

  ☞ 近大远小
  ☞ perspective设置方式及取值
    ✔ 给设置了transform属性元素的直接父元素设置透视即可

  

旋转

• rotateX()

  沿着x轴旋转

• rotateY()

  沿着Y轴旋转

• rotateZ()

  沿着Z轴旋转

缩放

• scaleX()

  沿着x轴放到或缩小

• scaleY()

  沿着Y轴放到或缩小

倾斜

• skewY()

  沿着Y轴倾斜

• skewX()

  沿着X轴倾斜

动画(animation)

☞ animation:(补间动画)   ,  可以让元素始终保存一个动画的效果,不需要用户的动作

☞ transition:(补间动画),    必须要有用户的动作,动画才可以执行


语法:
@keyframes 动画序列名称 {
  from {
      开始状态
  }  
  to {
      结束状态
  }
}
或者
@keyframes 动画序列名称 {
  0%{
      开始状态
  }  
  100%{
      结束状态
  }
}

例如:
       .one {
           动画调用
            animation-name: one_move;
            动画执行时间
            animation-duration: 2s;
        }

        /* 定义动画集(序列) */
        @keyframes one_move {
            
            /* 设置开始状态 */
            from {
                transform: translateX(0px); 
            }
            
            /* 设置结束状态 */
            to {
               transform: translateX(800px);
            }
        }



动画属性合写:
     animation: move  2s infinite  alternate linear 1s;

     1. 必须设置 animation-name 和  animation-duration

     2. 没有顺序的要求

动画属性

属性	描述
@keyframes	定义动画
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的时间。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。还有 infinite
animation-direction	动画是否在下一周期逆向地播放。默认是 "normal"，alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。还有“paused”
animation-fill-mode	规定动画结束后状态，保持 forwards 回到起始 backwards
animation	所有动画属性的简写属性

私有前缀(了解)

浏览器厂商通常都是在属性名称前添加厂商的私有前缀，来测试这些尚未成为标准的特性。                     因此，可以借助私有前缀，来解决浏览器对CSS3的兼容性问题。

内核	前缀	主要浏览器
Trident	-ms-	Internet Explorer
Gecko	-moz-	Firefox
Webkit	-webkit-	Chrome、Opera、Safari、Android
Presto	-o-	早期Opera

.box{
    -webkit-transition:all 1s; 
    -moz-transition:all 1s; 
    -ms-transition:all 1s; 
    -o-transition:all 1s; 
    transition:all 1s; 
}
/*推荐使用 先前缀后标准 顺序*/