CSS-形变和动画详解

Rsquo
230 阅读7分钟

一. transform

1.1 transform作用以及语法

CSS transform 属性允许对某一个元素进行某些形变, 包括旋转，缩放，倾斜或平移等。

  • 注意事项，并非所有的盒子都可以进行transform的转换（通常行内级元素不能进行形变，即transform对于行内级非替换元素是无效的）

    只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。

    warn.png

  • transform属性的语法：参考官网

  • 常见的函数transform function有：

    • 平移：translate(x, y)

    • 缩放：scale(x, y)

    • 旋转：rotate(deg)

    • 倾斜：skew(deg, deg)

1.2 translate(x, y)

  • 平移：translate(x, y)

    • 用于移动元素在平面上的位置

  • 值个数

    • 一个值时，设置x轴上的位移

    • 二个值时，设置x轴和y轴上的位移

  • 值类型：

    • 数字：100px

    • 百分比：参照元素本身（ refer to the size of bounding box ）

    translate.png

1.3 translate的百分比

  • translate是translateX和translateY函数的简写。

    • translate3d后续补充

  • translate的百分比可以完成一个元素的水平和垂直居中

    .container {
  height: 300px;
  background-color: orange;
}
.box {
  display: inline-block;
  height: 100px;
  background-color: #f00;

  /* 两件事情:
      1.让元素向下位移父元素的50%
      2.让元素向上位移自身的50% 
  */
  /* margin-top的百分比是相对于包含块(父元素)的宽度 */
  /* margin-top: 50%; */
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}

<div class="container">
<div class="box">我是box盒子</div>
</div>

  • translate函数相对于flex布局的兼容性会好一点点，不过目前flex布局已经非常普及，可以直接使用flex布局

1.4 scale(x, y)

  • 缩放：scale(x, y)

    • scale() CSS 函数可改变元素的大小

  • 值个数

    • 一个值时，设置x轴上的缩放

    • 二个值时，设置x轴和y轴上的缩放

  • 值类型：

    • 数字：

      • 1：保持不变

      • 2：放大一倍

      • 0.5：缩小一半

    scale.png

    • 百分比：百分比不常用

  • scale函数是scaleX和scaleY的缩写

    • scale3d后续补充

1.5 rotate

  • 旋转：rotate()

  • 值个数

    • 一个值时，表示旋转的角度

  • 值类型：

    • 常用单位deg：旋转的角度（ degrees ）

      • 正数为顺时针

      • 负数为逆时针

    rotate.png

    • 弧度（rad）
    • 圈数（turn）

    rad.png

1.6 transform-origin

  • transform-origin：形变的原点，修改形变的坐标原点

    • 比如在进行scale缩放或者rotate旋转时，都会有一个原点
    • 默认值：transform-origin: center center;

  • 一个值：

    • 设置x轴的原点

  • 两个值：

    • 设置x轴和y轴的原点

  • 必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个

    • left, center, right, top, bottom关键字

    • length：从左上角开始计算

    • 百分比：参考元素本身大小

    /* 修改当前元素的形变的原点位置 */
/* transform-origin: center top; */
/* transform-origin: 20px 20px; */
transform-origin: 10% 10%;

1.7 skew倾斜

  • 倾斜：skew(x, y)

    • 函数定义了一个元素在二维平面上的倾斜转换。

  • 值个数

    • 一个值时，表示x轴上的倾斜

    • 二个值时，表示x轴和y轴上的倾斜

  • 值类型：

    • deg：倾斜的角度

      • 正数为顺时针
      • 负数为逆时针
    .box {
  font-style: italic;
  width: 200px;
  height: 100px;
  background-color: orange;
}

.box:hover {
  transform: skew(10deg, 10deg);
}

<div class="box">我是div元素</div>

    skew.png

注意： 倾斜的原点受transform-origin的影响

1.8 transform设置多个值

  • 语法：

    语法.png

  • <transform-function>

    • +: 一个或者多个, 并且多个之间以空格分隔 transform: scale() translate();

  • <box-shadow>

    • #: 一个或者多个, 多个之间以, 分隔 box-shadow: 1px 1px 1px 1px #f00

      /* 下面这种写法下面的会把上面的覆盖掉 */
/* transform: translateX(50px);
transform: scale(1.2);
transform: rotate(45deg); */

transform: translate(50px) scale(1.2) rotate(45deg);

二. transition

2.1 理解过渡动画

  • 什么是transition动画呢？

    • CSS transition 提供了一种在更改CSS属性时控制动画速度的方法

    • 可以让CSS属性变化成为一个持续一段时间的过程，而不是立即生效的

    • 比如将一个元素从一个位置移动到另外一个位置，默认在修改完CSS属性后会立即生效

    • 但是我们可以通过CSS transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化

  • 通常将两个状态之间的过渡称为隐式过渡（implicit transitions），因为开始与结束之间的状态由浏览器决定。

  • CSS transition 可以决定

    • 哪些属性发生动画效果 (明确地列出这些属性)

    • 何时开始 (设置 delay）

    • 持续多久 (设置 duration)

    • 如何动画 (定义timing function，比如匀速地或先快后慢)

  • 并非所有的CSS属性都可以执行动画的，哪些是可执行动画的属性？

    • 查询MDN文档
    • 阅读CSS属性的文档说明

    transition.png

2.2 过渡常见属性

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

  • transition-property：指定应用过渡属性的名称

    • all：所有属性都执行动画

    • none：所有属性都不执行动画

    • CSS属性名称：要执行动画的CSS属性名称，比如width、left、transform等

  • transition-duration：指定过渡动画所需的时间

    • 单位可以是秒（s）或毫秒（ms）

  • transition-timing-function：指定动画的变化曲线

    • MDN文档
      • linear 以相同速度开始至结束的过渡效果
      • ease 以慢速开始，然后变快，然后慢速结束的过渡效果
      • ease-in 以慢速开始的过渡效果
      • ease-out 以慢速结束的过渡效果
      • ease-in-out 以慢速开始和结束的过渡效果

  • transition-delay：指定过渡动画执行之前的等待时间

    .container {
  background-color: #f00;
}

.box {
  position: relative;
  left: 0;

  width: 200px;
  height: 100px;
  background-color: orange;

  /* 告知浏览器 box 在进行一些CSS属性变化的时候有一个过渡效果 */
  /* transition-property: transform, left; */
  /* transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-in;
  transition-delay: 1s; */

  /* 简写属性 */
  transition: all 1s ease-in 1s;
}

.container:hover .box {
  left: 100px;
  transform: translate(100px);
  width: 500px;
}

<div class="container">
    <div class="box"></div>
</div>

2.3 总结几个单词的作用

  • transform是形变

    • 一个CSS属性，该CSS属性用于设置形变

    • 后面的值是形变的函数，比如scale、rotate、translate

  • translate是其中一个transform-function

    • 用于对元素进行平移；

  • transition是过渡的意思

    • 它本身也有转变的含义，但是更多表示的是过渡的过程

三. animation

3.1 transition弊端和animation介绍

  • 过渡动画有如下的缺点：

    • transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态

    • transition不能重复执行，除非一再触发动画

    • transition需要在特定状态下会触发才能执行，比如某个属性被修改了

  • CSS Animation的使用分成两个步骤：

    • 步骤一：使用keyframes定义动画序列（每一帧动画如何执行）

    • 步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等

3.2 animation的使用过程

  • 使用 @keyframes 来定义多个变化状态，并且使用animation-name来声明匹配：

    • 关键帧使用percentage来指定动画发生的时间点

    • 0% 表示动画的第一时刻，100% 表示动画的最终时刻

    • 也可以使用from和to关键字：

      • from相当于0%
      • to相当于100%

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

  • animation-name：指定执行哪一个关键帧动画

  • animation-duration：指定动画的持续时间

  • animation-timing-function：指定动画的变化曲线

  • animation-delay：指定延迟执行的时间

  • animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画

  • animation-direction：指定方向，常用值normal和reverse

  • animation-fill-mode：执行动画最后保留哪一个值

    • none：回到没有执行动画的位置

    • forwards：动画最后一帧的位置

    • backwards：动画第一帧的位置

  • animation-play-state：指定动画运行或者暂停（在JavaScript中使用，用于暂停动画）

    .box {
  width: 200px;
  height: 100px;
  background-color: orange;

  /* box要执行moveAnim的动画 */
  animation-name: moveAnim;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;

  /* 其他属性: */
  /* 动画执行的次数 */
  /* animation-delay: 2s; */
  /* animation-iteration-count: 2; */
  /* animation-direction: reverse; */
  /* 元素停留在动画的哪一个位置 */
  /* animation-fill-mode: forwards; */

  /* js动态修改 */
  /* animation-play-state: paused; */
  animation: moveAnim 3s linear 1s 2 normal forwards;
}

@keyframes moveAnim {
  0% {
    transform: translate(0, 0) scale(0.5, 0.5);
  }

  33% {
    transform: translate(0, 200px) scale(1.2, 1.2);
  }

  66% {
    transform: translate(400px, 200px) scale(1, 1);
  }

  100% {
    transform: translate(400px, 0) scale(0.5, 0.5);
  }
}
avatar
文章
阅读
粉丝