海浪Code

Appearance

animation ​

animation 属性控制动画的外观，@keyframes 规则控制动画中各阶段的变化。

animation-name 用来设置动画的名称，也就是我们稍后要在 @keyframes 里用到的名称。

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

@keyframes 可以通过设置特定时间点的行为来创建动画。 为此，我们只需要给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则。

代码示例

css
#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

transform ​

transform 属性有很多函数可以调用，可以对元素进行调整大小、移动、旋转、翻转等操作。 当使用伪类选取元素的指定状态（如 :hover）时，我们可以通过 transform 属性非常方便地给元素添加交互。

如

css
/* 放大效果 */
transform: scale(1.1);