CSS3アニメーションの研究ノート

CSS3の統合パート

2D変換（変換）

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

変位（位置変化素子）

• 並進（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%);

回転

• （回転角度）

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

• 概要

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

ズーム（変化素子のサイズ）

• スケール（X、Y）

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

• 概要

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

チルト（理解）

• スキュー（X角度、Y角）

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

• 概要

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

3D変換（変換）

3D座標系

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

   y 轴: 从上向下

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

☞ 左手法则:

置換

• 移動X（n）は

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

• 移動Y（n）は

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

• translateZ（N）

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

• 3Dの視点

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

  

回転

• 回転X（）

  沿着x轴旋转

• 回転Y（）

  沿着Y轴旋转

• 回転Z（）

  沿着Z轴旋转

スケーリング

• scaleXプロパティ（）

  沿着x轴放到或缩小

• scaleYの（）

  沿着Y轴放到或缩小

チルト

• skewY（）

  沿着Y轴倾斜

• skewX値（）

  沿着X轴倾斜

アニメーション（アニメーション）

☞ 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	アニメーション
アニメーション名	それは@keyframesアニメーションの名前を指定します。
アニメーションの継続時間	アニメーションの規定は、サイクルを完了するのに時間がかかります。
アニメーションのタイミング機能	アニメーションカーブの所定の速度。デフォルトでは「楽」です。
アニメーションの遅延	ときにアニメーションの規定が開始されます。デフォルトは0です。
アニメーションの繰り返しカウント	引当金のアニメーションが再生されます。デフォルトは1です。無限があります。
アニメーションの方向	次のサイクルで遊ん逆アニメーションです。デフォルトでは、「通常」で、交互に逆プレイ
アニメーションプレイ状態	かどうかのアニメーションの規定は、実行中または一時停止されています。デフォルトでは「実行中」されます。あり、「一時停止」
アニメーションフィルモード	アニメーションの州の規制の後、後方から始めに戻って前方に保ちます
アニメーション	すべてのアニメーションプロパティの短縮形プロパティ

プライベートプレフィックス（理解）

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

カーネル	接頭辞	メインブラウザ
トライデント	-ミズ-	インターネットエクスプローラ
ヤモリ	-moz-	Firefoxの
Webkitの	-webkit-	クローム、オペラ、サファリ、アンドロイド
プレスト	-O-	初期のオペラ

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