太原做网站：CSS动画的状态

2019.08.02 mf_web

太原做网站CSS已经在很多方面成熟多年，尤其是在CSS动画方面。随着每一天的过去，越来越多的开发人员正在创建生动，呼吸的界面。在本文中，我们将了解CSS动画的状态，它是如何增长的，它现在的功能以及可用的一些资源和工具。让我们开始吧！

发展

在网络上使用动画正在上升，主要是因为 CSS的增加transition和 @keyframes增加。曾经有一段时间动画和CSS彼此不认识，但今天情况并非如此。文章，教程，高级课程甚至动作指南现在比以前更容易获得。@keyframes与animation物业相结合，transition 最终使开发人员有机会正确地制作动作，并为界面赋予个性和生活一度不被考虑。

Googles Material Motion Guidelines的一部分 — 来自谷歌的物质运动指南

现在，CSS动画和交互设计从未像现在这样激动人心！

动画属性和关键帧

该animation属性的当前实现允许开发人员控制持续时间，定时，延迟，迭代计数，方向，填充模式和播放状态。定时部分还允许steps()功能。这种特殊的计时功能可以打破动画或过渡到片段（如电影胶片），而不是从一个状态到另一个状态的连续过渡。关键帧允许运动开发人员使用甚至百分比来声明位置 from， to以在声明的属性值之间进行动画处理。这是一个很好的开始，但我们将在一个不足之处进行讨论。

过渡财产

那就是光荣的 transition 财产; 一个像花哨一样的属性animation ，它允许我们在更改属性时控制动画速度。在两个状态之间转换的过程通常称为隐式转换; 描述开始和最终状态之间的状态的术语，由浏览器隐式定义。转换目前允许定制属性，时间，持续时间和延迟。

少了什么东西？

CSS动画可能会很强大，但它仍然缺乏动画师最想要的特定方面; 时间轴控制。我的意思是可以根据时间进行影响和操纵的序列。

五

@keyframes move-object {

from { starting position property and values }

at 2s { do this }

wait-until 4s { this happens }

to { stop position property and values }

}

上面的语法不存在，但更详细地描绘了网络上的动画专家渴望的图片。例如，GreenSock以这种类型的排序而闻名，但不幸的是只发生在JavaScript中。在CSS中使用它也不是很好吗？我认同。

通过使用JavaScript进行进一步细粒度控制序列，肯定有能力控制animation和transition事件。使用JavaScript，开发人员可以检测每个新动画迭代的开始，当动画发生时，动画结束时，转换事件也是如此。

浏览器检查和工具

对于浏览器开发人员工具来说，这是非常激动人心的时刻，以便检查和调整CSS动画。大多数浏览器（Firefox，Chrome）允许对Safari和Edge进行CSS动画检查。从一位为微软工作的消息来源告诉我，动画检查是微软团队真正想做的事情。让我们希望Safari的相同之处。

至于该浏览器不支持动画的检查，我们有以下能力...

可以擦洗的时间线检查。
显示应用于::before 和 ::after 伪元素的动画。
动态调整keyframes属性和值。
报告keyframes姓名。
显示动画属性。
轻松选择器和贝塞尔曲线编辑器。
颜色编码以了解事件是转换，关键帧还是Web动画。
控制并更改播放速率。

虽然开发人员可以根据上面的列表进行相当多的选择，但他们仍然需要更多关于用户交互动画的工具。这也可以称为属性插值，通过从周围的已知值计算中间值到系列中来插入; 就像用转换更改为新值一样。这些动态/反应动画可以随时开始，不确定，并且具有基于用户交互的可变持续时间。再一次无法通过浏览器提供的任何开发人员工具进行调试或检查。

未来

CSS动画的未来看起来很明亮，尽管与规范相关的一切都趋于缓慢。CSS的motion-path 模块contain， will-change和prefers-reduced-motion媒体查询（尚未一个标准，只有WebKit的）是CSS动画师目前即将推出的功能。

CSS运动路径

运动路径允许开发人员沿着作者指定的路径为任何图形对象设置动画。您可以使用SVG 1.1定义的非常类似的方式定义路径。

五

.my-element {

motion-path: path('M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z');

motion-offset: 0;

motion-rotation: reverse;

}

的 motion-path 定义了一个元素将遵循或根据移动的路径。我们的motion-offset属性是元素在路径上某处的位置。属性motion-rotation是元素沿路径移动时“面对”的方向。

查看Dan Wilson的CodePen上的这些演示集，其中提供了实例展示motion-path功能。