CSS样式——CSS3动画类样式

• 过渡样式

  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%);
    }
  }