非你网

一个网站全部都是安安静静的文字和图片。这样总感觉少了点什么。特别是在 pc 上。那么使用 css 就可以让你的文字和图片动起来。网站也就会有色彩一些了。动动你的小手，多敲敲几行代码吧。

操作一波

• 我们可以使用 transition 实现。

https://www.w3school.com.cn/cssref/pr_transition.asp

.avatar {
    transition:top 0.3s ease;
}

但是，transition 需要逻辑去触发。比如鼠标移上去了。或 js 给与其对应的属性变化了。这样对于默认就想看到动画效果比较麻烦。

- 我们还可以使用 keyframes 实现。

https://www.w3school.com.cn/cssref/pr_keyframes.asp

先定义：

# 注意各浏览器之间的兼容性
@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

然后在 class 中绑定：

.avatar {
    animation: fadeIn 0.4s;
}

只要 div 有了 avatar 这个 class，默认渲染的时候就会动起来。如：

<img src="../images/avatar/1.jpg"  class="avatar" />

keyframes 注意兼容性，还要注意过程的描述。比如从 0% 到 100%，这中间可以增加更多的节点。还可以使用 from, to 来实现。如：

@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

还有 animation 的属性也是有一些的。比如让动画一直循环下去，就添加 alternate 值。请看

https://www.w3school.com.cn/cssref/index.asp#animation