• 过渡款式

    1. 设置须要进行过渡的CSS款式：transition-property:款式名
    2. 设置实现过渡的工夫(单位为秒或毫秒)：transition-duration:10ms
    3. 设置过渡提早执行工夫(单位为秒或毫秒)：transition-delay:10ms

    4. 设置过渡动画静止曲线：transition-timing-function:曲线名

      • 直线线性动画：linear
      • 缓速曲线动画：ease
      • 减速曲线动画：ease-in
      • 加速曲线动画：ease-out
      • 先减速后加速曲线动画：ease-in-out
      • 贝塞尔曲线动画：cubic-bezier
    5. 适度款式的复合语法：transition:过渡属性 过渡时长 提早执行工夫 过渡动画

  • 元素变形款式

    1. 设置元素位移复合语法：transform:translate(x轴位移量,y轴位移量)

      • 设置x轴位移量：transform:translateX(位移量)
      • 设置y轴位移量：transform:translateY(位移量)
      • 设置z轴位移量：transform:translateZ(位移量)

    2. 设置元素缩放复合语法：transform:scale(x轴缩放比,y轴缩放比)

      • 默认缩放比为1，小于1进行放大，大于1进行放大
      • 设置x轴缩放量：transform:scaleX(缩放比)
      • 设置y轴缩放量：transform:scaleY(缩放比)
      • 设置z轴缩放量：transform:scaleZ(缩放比)

    3. 设置元素斜切复合语法：transform:skew(x轴斜切角度,y轴斜切角度)

      • 设置x轴斜切量：transform:skewX(斜切角度)
      • 设置y轴斜切量：transform:skewY(斜切角度)

    4. 设置元素旋转复合语法：transform:rotate(z轴旋转角度)

      • 设置x轴旋转角度：transform:rotateX(旋转角度)
      • 设置y轴旋转角度：transform:rotateY(旋转角度)
      • 设置z轴旋转角度：transform:rotateZ(旋转角度)

  • 设置元素变形基点

    • 复合语法：transform-origin:X轴基点 Y轴基点 Z轴基点
    • 设置x轴基点：transform-origin-x:X轴基点
    • 设置y轴基点：transform-origin-y:Y轴基点
    • 设置z轴基点：transform-origin-z:Z轴基点

    • 基点可选值：

      • 左：left
      • 右：right
      • 上：top
      • 下：bottom
      • Z轴只能给数值

  • 设置3D变形成果

    • 设置给父元素

      • 设置3D空间景深(值越大，幅度越小)：perspective:200px;

      • 设置3D空间景深基点地位：perspective-origin:left

        • 从左侧观看：left
        • 从右侧观看：right
        • 从上侧观看：top
        • 从下侧观看：bottom

    • 设置给进行3D变形的元素

      • 开启3D空间：transform-style:preserve-3d

      • 设置反面显示方式：backface-visibility:hidden

        • 不暗藏反面显示：visible
        • 暗藏反面显示：hidden

    • 具备3D变形的transform款式值

      • 以x轴高低翻转成果：rotateX(旋转角度)
      • 以y轴左右翻转成果：rotateY(旋转角度)
      • 以z轴前后位移成果：translateZ(位移量)
      • 元素厚度成果：scaleZ(缩放比)

    • 3D语法：

      • scale3d(X轴缩放比,Y轴缩放比,Z轴缩放比)
      • translate3d(X轴位移量,Y轴位移量,Z轴位移量)
      • rotate3d(1[X],1[Y],1[Z],旋转角度)——1示意增加，0示意不增加

  • CSS3动画

    • 设置动画名：animation-name:动画名

      • 动画关键字：@keyframes 动画名{动画代码}
    • 设置动画时长(单位为毫秒或秒)：animation-duration:10ms——
    • 设置提早执行时长(单位为毫秒或秒)：animation-delay:10ms——毫秒或秒
    • 设置动画反复次数：animation-iteration-count: infinite;
      默认执行1次，infinite示意有限次执行

    • 设置动画静止曲线：animation-timing-function

      • 直线线性动画：linear
      • 缓速曲线动画：ease
      • 减速曲线动画：ease-in
      • 加速曲线动画：ease-out
      • 先减速后加速曲线动画：ease-in-out
      • 贝塞尔曲线动画：cubic-bezier

    • 设置动画补白形式：animation-fill-mode

      • 不扭转默认行为：none
      • 当有延时时，并且第一帧与初始地位不一样，会在延时工夫内达到第一帧地位期待：backwards
      • 静止完结后停留在最初一帧：forwards
      • backwards 和 forwards 两种个性都具备：both

    • 设置动画轮流播放形式：animation-direction

      • 动画失常播放：normal
      • 动画正反轮流播放：alternate
      • 动画反向播放：reverse
      • 动画反正轮流播放：alternate-reverse
    • 动画款式复合语法：animation:动画名 静止时长 静止曲线 静止延时 静止次数 轮流播放动画 动画补白

  • CSS3动画库：

    • 开源社区下载：https://daneden.github.io/ani...
    • 官网下载：https://animate.style/
      应用形式：下载animate.css后引入文件，给须要增加动画的标签增加 class="animated 动画名 循环次数"

  • 动画案例

    .wobble {  -webkit-animation-name: wobble;  animation-name: wobble;}@-webkit-keyframes  wobble {  0% {      -webkit-transform: translateX(0%);      transform: translateX(0%);  }  15% {      -webkit-transform: translateX(-25%) rotate(-5deg);      transform: translateX(-25%) rotate(-5deg);  }  30% {      -webkit-transform: translateX(20%) rotate(3deg);      transform: translateX(20%) rotate(3deg);  }  45% {      -webkit-transform: translateX(-15%) rotate(-3deg);      transform: translateX(-15%) rotate(-3deg);  }  60% {      -webkit-transform: translateX(10%) rotate(2deg);      transform: translateX(10%) rotate(2deg);  }  75% {      -webkit-transform: translateX(-5%) rotate(-1deg);      transform: translateX(-5%) rotate(-1deg);  }  100% {      -webkit-transform: translateX(0%);      transform: translateX(0%);  }}