应用视觉设计进阶-transform、animation和关键帧

Transform 属性

Transform | scale：更改元素的大小

CSS 属性transform里面的scale()函数，可以用来改变元素的显示比例。

举个雷子：

实现斗鱼直播间窗口–悬停放大

参见–CSS3 实现放大动效

Transform | skex：沿 X 轴倾斜元素

• skewX(x deg)使元素沿着 X 轴（横向）翻转指定的角度。
• skewY(x deg)使元素沿着 X 轴（横向）翻转指定的角度。
• rotate()该用法和 skex 类似

使用 CSS 创建图形

术语表

• blur-radius => 模糊半径，
• spread-radius => 辐射半径，
• transparent => 透明的，
• border-radius => 圆角边框

举个雷子：

<style>
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: rotate(-45deg);
}
.heart:after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart:before {
  content: '';
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
</style>
<div class = "heart"></div>

---

CSS 的关键帧和动画

animation–动画

animation属性控制动画的外观，总共有 8 个animation属性。

animation-name设置动画的名称， 也就是要绑定的选择器的@keyframes的名称。

animation-duration设置动画所花费的时间。

@keyframes–关键帧

@keyframes规则控制动画中各阶段的变化。

@keyframes能够创建动画。

• 创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。
• 具体是通过设置动画期间对应的“frames”的 CSS 的属性
  • 以百分比来规定改变的时间
  • 或者通过关键词“from”和“to”，等价于 0% 和 100%。
• 0% 是初始状态。100% 就是元素最后的样子

举个雷子：

动画开始时背景为蓝色，中间为绿色，最后为黄色

#rect {
  animation-name: rainbow;
  animation-duration: 4s;
}
@keyframes rainbow {
  0% {
    background-color: blue;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: yellow;
  }
}

• 往往使用伪类，如:hover 搭配动画
• 但有一个问题：动画在设置的时间之后重置了，回到了动画前的样式
• 当有需求：而我们想要的效果是按钮在悬停时始终高亮
• 就需要将animation-fill-mode属性，来指定了在动画结束时元素的样式。
• 设置成forwards来实现。
• animatio-fill-mode: forwards;

CSS 创建动画运动

• 当元素的position被指定，如fixed或者relative时
• 指定元素的偏移属性right、left、top和bottom可以用在动画规则里创建动作
• 结合关键帧@keyframes，能够实现元素的动画运动
• 试一试 ：FreeCodeCamp–让元素动起来！

让动画一直动下去！

animation-iteration-count这个属性允许你控制动画循环的次数。

栗子：

animation-iteration-count: 3;

在这里动画会在运行 3 次后停止

如果想让动画一直运行，可以把值设置成infinite（无限）。

之前练习 CSS 动画和关键帧时写了一个爱心，现在，我们可以使用该属性让它跳动起来！

试一试：FreeCodeCamp–CSS 写一个跳动的爱心！

效果：

为元素动画设置可变速率

• 可以通过协调动画过渡时间和关键帧百分比来改变动画的运动速率
• 也可直接设置animation-duration属性 * 如：animation-duration: 1.1s;

  或者。。

使用关键字更改动画定时器

• animation-timing-function规定动画的速度曲线。
• 规定从样式 A 过渡到 样式 B 的过程中，运动中的加速和减速的过程。
• 已经有了很多预定义的值可以直接使用于大部分场景。
  • ease，慢–快–慢，它是默认值
  • ease-out，动画以高速开始，以低速结束;
  • ease-in，动画以低速开始，以高速结束；
  • linear，动画从头到尾的速度是相同的。

除了上述几个预定义值之外，CSS 还提供了–

贝塞尔曲线（Bezier curves）

• 用cubic-bezier来定义贝塞尔曲线。
• 曲线的形状代表了动画的速度。
• 曲线在 1*1 的坐标系统内，曲线的 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。
• cubic-bezier函数包含了 1 * 1 网格里的 4 个点：p0、p1、p2和p3。
• 其中p0和p3是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。
• 你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。
• 在 CSS 里面通过(x1, y1, x2, y2)来确定p1和p2。

举个雷子：

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

• 在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2），如果你还记得初中几何，结果是从原点到点 (1, 1) 的一条直线。动画速度呈线性，效果和linear一致。换言之，元素匀速运动。

另一个栗子：

模拟杂耍球运动

animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);

效果：