关于前端学习: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%);
  }
}