粉碎动画系列第一部：经典卡通如何启发现代CSS

浏览器厂商很快就在CSS中加入了运动功能。首先是简单的:hover伪类，随后是两种状态间的过渡动画。接着出现了通过@keyframes改变状态的能力，最近更是新增了与滚动位置联动的滚动驱动动画。

即便有了这些增强功能，CSS动画仍然相对基础。这让我想起了小时候在电视上看到的汉纳-巴伯拉动画系列。

低成本动画技术的启示

这些动画短片缺乏真人电影或动画大片的预算，也远低于威廉·汉纳和约瑟夫·巴伯拉在米高梅制作《猫和老鼠》时的资源。这意味着动画师需要开发技术来克服成本限制和当时的技术局限。

他们采用每秒更少的帧数和更少的画格。不是为每一帧使用不同的图像，而是将每幅画面重复多次。通过缩放和叠加额外元素来构建新场景，尽可能重复使用画格。他们保持角色身体基本静止，通过叠加眼睛、嘴巴和腿部来制造说话和走路的假象。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


@keyframes background-scroll {
  0% { background-position: 2750px 0; }
  100% { background-position: 0 0; }
}

div {
  overflow: hidden;
  width: 100vw;
  height: 540px;
  background-image: url("...");
  background-size: 2750px 540px;
  background-repeat: repeat-x;
  animation: background-scroll 5s linear infinite;
}

现代CSS实现技巧

汉纳-巴伯拉动画师开发的简单高效技术可以用CSS实现。现代布局工具允许网页开发者分层元素。可缩放矢量图形(SVG)可以包含多个帧，开发者不必依赖JavaScript，可以使用CSS改变元素的不透明度、位置和可见性。

在为艾美奖得主游戏作曲家Mike Worth设计网站时，我运用了这些原则。他想要一个大胆的复古风格设计来展示他的作品。我在整个网站中使用CSS动画，为访客创造惊喜。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


@keyframes bumpy-ride {
  0% { translate: 0 0; }
  10% { translate: 0 -5px; }
  20% { translate: 0 3px; }
  30% { translate: 0 -3px; }
  40% { translate: 0 5px; }
  50% { translate: 0 -10px; }
  60% { translate: 0 4px; }
  70% { translate: 0 -2px; }
  80% { translate: 0 7px; }
  90% { translate: 0 -4px; }
  100% { translate: 0 0; }
}

SVG动画技巧

SVG提供了惊人的性能和灵活性。通过CSS操作组和其他元素的能力，使其成为动画的理想选择。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<svg>
  <!-- 静态元素 -->
  <g>...</g>
  
  <!-- 动画帧 -->
  <g class="frame-1">...</g>
  <g class="frame-2">...</g>
  <g class="frame-3">...</g>
  <g class="frame-4">...</g>
  <g class="frame-5">...</g>
  <g class="frame-6">...</g>
</svg>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


@keyframes ranger-talking {
  0% { visibility: visible; }
  16.67% { visibility: hidden; }
  100% { visibility: hidden; }
}

[class*="frame"] {
  visibility: hidden;
  animation: ranger-talking var(--animation-duration) infinite;
}

动画的实用价值

动画不仅仅是装饰，它们可以：

通过引导用户操作改善可用性
在交互时带来愉悦和惊喜
强化品牌形象
帮助讲述品牌故事

在为Mike Worth设计的404页面中，当用户迷路时，他的吉祥物会慢慢陷入流沙，同时气泡上升，创造出一个既有趣又能反映品牌个性的体验。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


@keyframes four-oh-dear-bubbles {
  0% { 
    animation-timing-function: ease-in; 
    opacity: 1; 
    transform: translateY(45px);
  }
  100% { 
    animation-timing-function: ease-out;
    opacity: 1; 
    translate: 0 0;
  }
}

无障碍考虑

不是所有人都以相同方式体验动画。有些人可能会感到不适甚至诱发癫痫。我们可以通过prefers-reduced-motion媒体查询来关闭动画：

1
2
3


@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

就像汉纳-巴伯拉的动画师将技术限制转化为他们的标志性风格一样，CSS动画让网页专业人士能够打造富有特色的体验。通过分层元素、循环帧和应用细微运动，你可以在设计中注入个性，同时提升用户体验。

经典卡通如何启发现代CSS动画技术

本文探讨了汉纳-巴伯拉经典卡通片的低成本动画技术如何为现代CSS动画提供灵感，通过代码示例展示了如何实现循环背景、元素复用和帧动画等效果。