css 状态条动画_CSS动画的状态

css 状态条动画

多年来，CSS已经以多种方式成熟，尤其是在CSS动画方面。 随着时间的流逝，越来越多的开发人员正在创建生活，呼吸的界面。 在本文中，我们将研究CSS动画的状态，它的增长方式，今天的功能，并介绍一些可用的资源和工具。 让我们开始吧！

成长性

网络上动画的使用正在增加，这主要是由于CSS transition和@keyframes增加。 曾经有一段时间动画和CSS彼此不了解，但今天情况并非如此。 现在，文章 ， 教程 ， 高级课程甚至运动指南的访问权限比以往任何时候都容易得多。 将@keyframes与animation属性结合在一起，以及transition ，最终使开发人员有机会正确地制作动作，并在没有考虑的情况下赋予界面个性和生活。

对于CSS动画和交互设计，没有比现在更激动人心的时刻了！

动画属性和关键帧

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

过渡属性

然后是光荣的transition属性。 一种属性与animation一样奇特，并且允许我们在更改属性时控制动画速度。 通常，在两个状态之间进行转换的过程称为隐式转换。 一个术语，描述浏览器隐式定义的开始状态和最终状态之间的状态。 当前，过渡允许自定义属性，时间，持续时间和延迟。

上面的介绍视频摘自Craig Campbell撰写的Up and Running With CSS Transitions 。

少了什么东西？

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中也有这个很棒吗？ 我认同。

上面的视频来自GreenSock动画平台： Craig Campbell的第一步 。

通过使用JavaScript对序列进行进一步的粒度控制，当然可以控制animation和transition事件。 使用JavaScript，开发人员可以检测到每个新动画迭代的开始，动画发生的时间，动画结束的时间，并且过渡事件也是如此。

浏览器检查和工具

对于浏览器开发人员来说，这是令人兴奋的时刻，以便检查和调整CSS动画。 大多数浏览器（ Firefox ， Chrome ）都允许检查有关Safari和EdgeCSS动画。 一位来自Microsoft的消息人士告诉我，动画检查是Microsoft团队真正想要做的事情。 让我们希望对于Safari同样如此。

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

• 可以清理的时间轴检查。
• 显示应用于::before和::after伪元素的动画。
  
• 快速调整keyframes属性和值。
• 报告keyframes名称。
• 显示动画属性。
• 轻松的选取器和贝塞尔曲线编辑器。
• 进行颜色编码，以了解事件是过渡，关键帧还是网络动画。
• 控制和更改播放速率。

尽管开发人员可以根据上面的列表进行选择，但是他们仍然需要更多有关用户交互的动画工具。 这也可以称为属性插值 ，即通过根据周围的已知值计算中间值来将中间值插入到序列中。 就像您通过转换更改为新值时一样。 这些动态/React性动画可以随时启动，不确定并且可以根据用户交互的持续时间而变化。 再次无法通过浏览器提供的任何开发者工具进行调试或检查的内容。

未来

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功能的实时示例。

• 我CSS运动路径演示 ，作者丹·威尔逊（Dan Wilson）
• CSS运动路径 ，作者Dan Wilson

会改变

will-change属性为作者提供了一种向浏览器提示元素预期的更改类型的方法。 这使浏览器可以在实际更改元素之前提前设置适当的优化。

.my-element {
  will-change: transform;
}

这种优化可以通过在实际需要之前提前完成昂贵的工作来改善感知的加载时间和页面布局。 话虽如此，建议开发人员不要将will-change应用于太多元素，因为它会消耗资源并导致页面变慢。

喜欢减少运动

WebKit的这种非规范添加功能为那些在“ 系统偏好设置”中指定减少运动偏好的用户创建了避免大范围运动的样式。

@media (prefers-reduced-motion) {
  .my-element {
     animation: none;
  }
}

与实际的运动创建相比，这更多是可访问性情况。 一个有趣的人可以考虑，有闲的时候可以退房。

包含

此CSS模块指示元素的子树独立于页面的其余部分，从而在正确使用时允许用户代理进行大量优化。 CSS动画师最有趣的一个是可以传递的paint值。

.element-with-motion {
    contain: paint;
}

如果包含的元素不在屏幕上或被遮挡，则浏览器可以直接跳过对其内容的绘画，因为可以确保它们的内容不在屏幕上或被遮挡。 通过确保在初始绘制过程中更快的渲染管线最终提供了价值。 目前，这仍是W3C的工作草案。

资源资源

有很多方法可以跟上CSS动画。 以下是一些工具和资源，包括可以随时阅读的规范。 如果您知道其他很棒的实用资源，请在评论中告诉我们，我们会将其添加到列表中。 动画愉快！

W3C规格

• CSS计时功能1级
• 运动路径模块1级
• CSS将更改模块级别1
• CSS动画模块3级

学习

• Catalin Miron的CSS动画初学者介绍
  
• 9个关于Envato Tuts + 上CSS动画的热门课程
• CSS动画摇滚
• 如何通过Val Head 读取三次贝塞尔曲线
• 《 Smashing》杂志的CSS关键帧动画简介
• Web动画基础： Rachel Nabors的CSS动画和过渡
  
• 垃圾免费
• David DeSandro的CSS 3D转换简介
• 使用CSS可以为<CSS Property>设置动画吗？
• CSS过渡和动画。 运动路径模块CSS by Ruslan Homyak
• Val Head CSS动画口袋指南

工具类

• 杰里米·卡恩（Jeremy Kahn）的造型
• animate.css ，作者Daniel Eden
• 网络的材料组件
  
• 渐变效果由安德烈Sitnik
• Animista由安娜Travas
  
• 等待！ 威尔·斯通动画
  
• cssanimate.com CSS3关键帧动画生成器
  
• cubic-bezier.com由利·贝罗
  
• cssreference.io免费CSS可视指南，作者Jeremy Thomas
• ZURB的Motion UI
  
• Christian Pucci制作的具有特殊效果的神奇 CSS3动画
  
• Ian Lunn的Hover.css
  
• Benynt Feely的CSSYNTH

翻译自: https://webdesign.tutsplus.com/tutorials/the-state-of-css-animations--cms-28764

css 状态条动画