粉碎动画第一部分：经典卡通如何启发现代CSS
你是否曾想过早期卡通动画的局限性如何与当今的网页设计相关联？从循环背景到最小帧变化，这些复古动画技术与现代CSS有着惊人的相似之处。在这篇文章中，先锋作者和网页设计师Andy Clarke展示了他如何将这些原则应用于艾美奖获奖作曲家Mike Worth的新网站，使用CSS制作出引人入胜的趣味动画，让他的世界栩栩如生。
浏览器制造商很快为CSS添加了运动功能。首先是简单的:hover伪类，随后是两个状态之间的过渡。接着是跨@keyframes集合改变状态的能力，最近还有将关键帧与滚动位置链接的滚动驱动动画。
尽管有这些新增功能，CSS动画仍然相对基础。它们让我想起我从小在电视上观看的汉纳-巴伯拉动画系列。
解剖运动
在这一集中，当邮递员带着给Ranger Smith的电报到达时，汉纳-巴伯拉的技术立即变得明显。摄像机横向平移背景艺术家Robert Gentle的风景画，以制造邮递员正在移动的错觉。
当场景持续时间超过Robert Gentle风景画的单次平移时，背景会循环，灌木和树木反复出现。
这可以使用单个元素和改变其背景图像位置的动画来重新创建：
@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;
}
重用元素
由于每集的预算和制作时间有限，William Hanna和Joseph Barbera创建了一个简化的动画制作流程。他们每集使用少至2000个单独绘图和仅几个背景画，经常在多集中重复使用它们。
动画师还经常在这些背景画上叠加前景元素，以创建各种新场景。
循环帧创造运动
为了满足有限的预算和制作计划，汉纳-巴伯拉的动画师精心策划他们的动画，并巧妙地只动画特定元素。虽然头部和面部表情使角色说话，腿部变化使它们行走，但大多数角色的身体保持相对静态。
SVG提供了惊人的性能，并且在动画元素时提供了极大的灵活性。使用CSS操作组和其他元素的能力使其成为动画的理想选择。
@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的关于页面插图，我将光束照射到石板上，为原本平坦的图像增加深度。
交互动画
就像:hover伪类在有人与元素交互时提供有价值的视觉反馈一样，CSS动画可以在人与设计之间建立更深的联系。
我在Mike Worth的评论页面插图中包含了一个复活节彩蛋交互。大红按钮打开和关闭台灯，这让Mike的猩猩吉祥物感到沮丧，他正试图研究他的地图。
动画讲述故事
经过仔细考虑，动画可以反映品牌的身份并帮助讲述其故事。
Mike Worth的品牌是高能量的——就像他的个性一样——他关于自己作为视频游戏作曲家的工作的故事引人入胜且有趣。Mike希望与他的网站的每一次互动都能将他的个性带到屏幕上。
赋予生命
就像汉纳-巴伯拉的动画师将技术限制转化为他们的标志性风格一样，CSS动画使网络专业人士能够制作有个性的体验。通过分层元素、循环帧和应用微妙的运动，您可以为设计注入个性，同时改善某人的体验。
在我为Mike Worth网站的设计中，动画不仅仅是为了装饰；它讲述了一个关于他和他的工作的引人入胜的故事。每一个动作都反映了他的品牌身份，并使他的网站成为他创意世界的延伸。
下次您使用CSS动画时，请超越运动思考。也要考虑情感、身份和情绪。毕竟，一个经过深思熟虑的动画可以做的不仅仅是吸引某人的眼球。它可以捕捉他们的想象力。
更多精彩内容 请关注我的个人公众号 公众号（办公AI智能小助手）
公众号二维码
