跳到主要内容

使用CSS创建很酷的UI动画

动画是现代用户体验的重要组成部分,使用CSS实现比以往更容易。虽然它在动画方面似乎有限或较少的工具,但CSS实际上是一个非常强大的工具,能够生成非常流畅的60fps动画。在此功能中,我们将探索从推理和规划到实施的所有内容。

继续阅读以了解CSS过渡,或跳转到第2页对于CSS关键帧,第3页仔细看看动画表演,第4页有关动画SVG的指南。或点击进入第5页了解如何将它们组合在一起以创建UI动画。

需要更多灵感?看看我们的精彩综述CSS动画示例(以及如何编码)。

CSS转换

简而言之,CSS转换是一种在两个属性值之间提供动画的方法。要触发动画,需要在应用程序或网站中更改某些内容。 CSS过渡可用于实现许多动画效果,从简单的颜色变化到更复杂的过渡。

CSS中的转换很简单,我们只需要选择要转换的元素和时间。例如,如果我们有一个按钮,我们想要逐渐改变背景颜色而不是当用户将鼠标悬停在按钮上时立即改变背景颜色,我们使用转换。

.button {background-color:Crimson;转换:background-color 500ms;} .button:hover {background-color:DarkRed;}

过渡语法

CSS中的转换由四个属性组成。这些使我们能够控制过渡将如何生成动画。

过渡性质
这使我们能够选择要设置动画的属性。我们可以转换许多不同的属性。看到完整清单过渡性质性能

过渡期
此属性使我们能够控制从一个属性值到另一个属性值的转换所需的时间。这可以在几秒钟内定义(小号)或毫秒(女士)。

过渡定时功能
时序功能或“缓和”使我们能够随时调整变化率。我们可以使用许多关键字。例如,线性关键字将以相同的速度从A过渡到B,而易于进出将慢慢开始,在中间加速并在结束时减速。也可以使用定义定时功能立方贝塞尔属性。看到时序关键字的完整列表

过渡延迟
可以使用此属性延迟转换,并使用秒或毫秒设置。

过渡速记

上面列出的所有过渡属性都可以使用。组合成一个简写语句过渡属性。

过渡:财产||持续时间||时间函数||延迟;过渡:背景色500ms线性250ms;

我们可以省略我们不需要的值来设置默认值。

结合过渡

您可以组合多个过渡以创建精心设计的动画。检查此示例:

过渡:背景颜色500ms线性,颜色250ms轻松250ms;

浏览器支持

在现代浏览器中支持转换和动画非常好。 Internet Explorer 11或更高版本中的所有内容都将支持动画所需的大部分代码。

一些较新的动画属性也有例外;例如,CSS Motion Path,或者当使用SVG或自定义属性(CSS变量)作为动画的一部分时。

除非我们需要为Internet Explorer 10及更低版本提供支持,否则可能不需要大部分前缀。如果需要,有几种方法可以为代码添加前缀。自动prefixer是一个非常有用的工具,可以用作构建过程的一部分,也可以在项目结束时手动使用。它使我们能够配置您需要的浏览器支持,然后它将在需要时自动为我们的代码添加前缀。

我们还可以使用神奇的工具检查对任何属性的支持我可以用吗。只需输入我们想要使用的属性,然后查看支持的浏览器。

下一页:CSS关键帧指南



翻译字数超限