跳到主要内容

探索CSS动画的新领域

A flat illustration of spaceships, planets, satellites and comets, indicating the new frontier of CSS animation.

现代浏览器和设计工具在创造力方面提供了很多。移动设备已变成口袋强大,有足够的能力推动所有Retina屏幕像素,而不会出汗。因此,毫无疑问,充斥着所有这些力量的动态网站每天都在涌现。事实上,你很难找到一个不能使用的现代网站CSS动画在某种程度上,无论是简单的悬停过渡还是完整的艺术作品。

好的动画可以将静态内容带入生活,同时支持其余的设计并有助于表达品牌个性,它可以使自然更加自然用户体验因为我们是硬连线来回应移动的物体。

+$Why use CSS for animation?

+$Compared to script-driven animations, animations using CSS are easier to learn and can be used without having to know JavaScript. They can be made responsive as they can be modified through CSS media queries. Despite having a relatively simple syntax, we can create quite complex animations with it, especially with the help of CSS preprocessors.

+$Using CSS for animation consists of a style describing the animation and a@keyframes+$block that defines intermediate steps in an animation sequence. All aspects of the animation are controlled via a set of easily understandable properties:动画名动画持续时间动画定时功能动画延迟动画迭代计数动画方向动画填充模式动画播放状态+$. There is also the动画+$property, a shorthand syntax that combines all of the others.

这就是CSS动画代码最简单的形式:

/ *动画描述* / .slide-right {animation:slide-right 0.5s ease-in-out 0.2s无限替代两者; } / *动画步骤* / @keyframes slide-right {0%{transform:translateX(0); } 100%{transform:translateX(100px); }}

使用相同的语法,可以以与任何其他HTML元素相同的方式为SVG设置动画。

我们将探讨CSS动画的各个方面以及如何使用它来增强整体用户体验。

功能动画

动画可以应用于在界面中执行各种功能。他们可以成功地引导用户完成某个过程,改善方向并提供视觉反馈。这种动画在设计高质量,基于品牌的用户体验中起着极其重要的作用。我们来看一些功能性动画的例子。

页面过渡

单击网站导航链接通常会导致用户界面突然发生变化。请求页面,当浏览器收到服务器的响应时,在显示新页面之前,空白屏幕将短暂闪烁。这会中断用户的工作流程并且可能会让人迷失方向。页面过渡有助于减少分散注意力的影响。

我们不是让浏览器为我们处理这个问题,而是拦截请求,在后台异步加载新内容,然后使用CSS动画创建一个平滑过渡到另一个页面。这有助于在保持背景的同时促进连续感。

装载机和进度条

良好的交互设计的一个重要方面是提供视觉反馈。我们永远不应该让用户想知道发生了什么,或者交互的结果是否成功。

例如,在使用页面转换时,我们应该让用户不仅知道页面正在加载,而且还会很快显示它。实现此目的的一种方法是显示动画加载程序,指示操作正在进行中。

如果可以测量持续时间,我们可以改为显示进度条。此方法提供有关页面完全加载所需时间的有用信息。

超越装载机 - 骨架屏幕

装载机的替代解决方案是骨架屏幕,可以大大提高感知性能。骨架屏幕是在内容在后台加载时要显示的UI的简化图形表示。 UI被分成较小的骨架图像块,然后在准备好后立即与真实内容交换。我们可以使用CSS动画来指示内容正在加载以及确保逐渐显示更改。

微互动

微交互是我们几乎自动执行的小任务。喜欢推特,在购物车中添加商品,分享链接 - 这些都是微互动。我们可以使用CSS动画来提供视觉提示,并使动作的结果易于理解。一个例子是使CTA或各种UI按钮显得有形。

我们还可以使用CSS动画在状态之间创建有意义的过渡,例如,将菜单按钮从其原始形状变形为“X”图标,暗示可以通过再次单击相同的按钮来关闭导航。这样的设计既令人愉悦又令人愉悦。

动画还可以通过突出显示UI中的更改来引导用户的注意力,例如向购物车添加新项目。

达到60fps

在CSS动画方面要记住的一件事是性能。重要的是要保持动画无抖动并尽可能顺利地运行它们。否则,不会增强整个体验,你很快就会有破坏它的风险。虽然除了频繁测试之外,没有创建平滑动画的神奇配方,但您可以遵循一些原则来最小化风险。

硬件加速

始终旨在仅为硬件加速的CSS属性设置动画。这应该很容易记住,因为只有两个:变换和不透明度。目标是在合成层中进行所有更改,这是从浏览器的角度来看最便宜的。

更改时的其他属性会触发布局或重绘操作,这些操作更加昂贵。如果可能,请避免使用它们。

变换属性可用于缩放,倾斜,旋转和移动对象。使用left,top,right和bottom属性来更改元素的位置是一个常见的错误。动画这些将导致浏览器重新计算布局。使用transform:translateX()和transform:translateY()代替。

编排你的CSS

不要同时为太多元素制作动画,否则最终可能会使用幻灯片而不是动画。如果您发现自己处于需要为大量物体设置动画的位置,请协调它们的运动。提前计划您将设置动画的元素以及如何以及何时为其设置动画。

在这方面,动画延迟非常有用。好时机,它们也可以用来创造一个整洁的交错运动效果。偏移动画开始时间会减少浏览器的压力,因为动画不会同时启动。借助CSS预处理器或JavaScript,这更容易,因为它们支持循环函数。

以下是如何在SCSS中错开动画延迟属性:

.staggered {动画:幻灯片.7s缓和两个; } @for $ i从1到10 {.staggered:nth-child(#{$ i}){animation-delay:0.05s * $ i; }}

可能需要一些实验才能完全掌握编排,但努力将获得更好的表现。

调试

调试CSS动画可能是一项艰巨的任务,在这方面有一些帮助是必不可少的。通过Chrome和Firefox开发人员工具,您可以查看和调整关键帧动画,减慢它们的速度,并跟踪其性能。绝对值得熟悉这些工具。

使用JavaScript控制CSS动画

有时候你需要对动画进行更多的控制,这就是JavaScript的用武之地。有些东西根本就不能在CSS中完成。 JS使您可以使用不同的动画回调函数,如animationstart,animationiteration和animationend。

重新启动动画

尽管听起来微不足道,但在用户输入上重新启动CSS动画有时会非常棘手。简单地从元素中删除动画类并重新添加它不起作用。您需要在介于两者之间的额外步骤并触发元素上的回流。这是怎么做的:

const elem = document.querySelector('#animated-element'); const btnRestart =文件。 querySelector( '#BTN重启'); const restartAnimation = event => {event.preventDefault(); elem.classList.remove( '动画'); //这会触发reflow void element.offsetWidth; elem.classList.add( '动画'); }; btnRestart.addEventListener('click',restartAnimation,false);

作为最后的手段,从DOM中删除元素并再次添加它也将重新启动动画。

控制游戏状态

您可以使用类似的方式使用JS暂停和恢复CSS动画:

const elem =文件。 querySelector( '#动画元素'); const btnPlay =文件。 querySelector( '#BTN玩'); const btnPause = document。 querySelector( '#BTN-暂停'); const playAnimation = event => {event.preventDefault(); elem.style.animationPlayState ='running'; }; const pauseAnimation = event => {event.preventDefault(); elem.style.animationPlayState ='暂停'; }; btnPlay.addEventListener('click',playAnimation,false); btnPause.addEventListener('click',pauseAnimation,false);

展望未来

规范中列出了一些令人兴奋的标准CSS功能,这些功能目前正在进行中,并已部分在某些浏览器中实现。从CSS动画角度来看,其中两个特别有趣:CSS变量或更准确的CSS自定义属性和运动路径模块。

使用CSS自定义属性设置动画

尽管CSS预处理器中已有变量可用一段时间了,但有一点可以使CSS自定义属性更加灵活,并且在动画场景中非常有用。

您当然可以利用以下事实:您可以通过getProperty(),setPropertyValue()和removeProperty()JS方法在运行时动态操作它们。例如,您的CSS代码可能如下所示:

#animated-obj { -  xPos:100px;动画:幻灯片.4s缓和; } @keyframes slide {to%{transform:translateX(var( -  xPos)); }}

然后,您可以访问JS中的--xPos属性:

const elem =文件。的getElementById( '动画-OBJ'); //读取我们的CSS代码const currentX = elem.style中声明的属性值。 getPropertyValue( ' -  XPOS');

将其设置为新值

elem.style.setProperty(' -  xPos','300px');

删除该属性

elem.style.removeProperty( ' -  XPOS');

这开辟了有趣的可能性,并为开发人员提供了将CSS变量与之前无法实现的动画配对的新方法。您可以在此功能的图像中看到使用CodePen上的CSS变量设置动画的绝佳示例。

值得一提的是,自定义属性是可继承的。更改其值将触发所有孩子的样式重新计算,因此良好的做法是将其设置为最具体的级别。

CSS Motion Path模块

通过“运动路径”模块,您可以沿自定义路径为对象设置动画。该规范定义了以下属性:offset-path,offset-distance和offset-rotate。 offset-path定义对象在动画期间将在其上移动的坐标,offset-distance指定沿偏移路径的位置,offset-rotate定义沿着偏移路径定位时元素的方向。

这是CSS中的简化示例:

.animated-obj {offset-path:path('M100,250 C 100,50 400,50 400,250'); offset-rotate:auto;动画:移动.5s线性无限; } @keyframes move {from {offset-distance:0%;到{offset-distance:100%; }}

获取动画效果

设计静态屏幕的日子早已不复存在,动画意味着Flash横幅和弹出窗口的日子已经过去了。我们应该欢迎现代网络的互动性,并开始在早期阶段思考动画而不是事后的想法。

如果你还没有这样做,现在是进入令人兴奋的CSS动画世界的最佳时机。凭借一点创造力,精心策划和现代化工具,几乎没有什么是无法实现的。

网页设计活动 生成伦敦 返回2018年9月19日至21日,提供行业领先的演讲者,一整天的研讨会和宝贵的交流机会 - 不要错过它。 立即获取生成票

相关文章:



翻译字数超限