Chrome DevTools – 检查动画

使用Chrome DevTools Animations(动画)检查器检查和修改动画。

animation inspector

TL;DR

  • 通过打开Animation Inspector(动画检查器)捕获动画。它会自动检测动画并将它们分组。
  • 通过减慢动画,重播动画,或查看源代码,来检查动画。
  • 通过更改动画的时间,延迟,持续时间或关键帧偏移来修改动画。

概述

在Chrome DevTools动画检查主要有两个目的。

  • 检查动画。 您希望减慢,重播或查看动画组的源代码。
  • 修改动画。 您想要修改动画组的时间,延迟,持续时间或关键帧偏移。 目前不支持贝塞尔编辑和关键帧编辑。

动画检查支持CSS动画,CSS转换和web动画。目前不支持requestAnimationFrame动画。

什么是动画组?

动画组是一组看起来彼此相关的动画。目前,web中没有真正的组动画概念,因此运动设计师和开发人员必须组合和计时单个动画,以使它们看起来是一个连贯的视觉效果。Animation Inspector(动画检查器)根据开始时间(不包括延迟等)预测哪些动画相关,并将它们并排分组。换句话说,在同一脚本块中触发的一组动画会被分到一组,但如果它们是异步的,那么它们将被分别分组。

开始

有两种打开动画检查器的方法:

  • 打开Elements(元素)面板,找到Styles(样式)窗格,然后按下 Animations(动画)按钮(animations button )。
  • 打开Command Menu(命令菜单)和类型Drawer: Show Animations

继续阅读

css3 loading(SVG loading)动画集合

在这些情况下,我们一般会用到(加载)loading动画,提示于用户页面在加载中,这些UX常识我想很多设计师都懂。今天分享几个仅用CSS3和SVG实现几个loading动画效果。

Loaders.css

令人愉快的和注重性能的纯CSS加载动画。

演示:https://connoratherton.com/loaders

Github:https://github.com/ConnorAtherton/loaders.css

loading.io

通过SVG / CSS / GIF打造Ajax加载图标!

网址:http://loading.io/

spinkit

CSS加载动画集合。 继续阅读

WebKit CSS3 动画基础

前几天在Qzone上看到css3动画,非常神奇,所以也学习了一下。首先看看效果http://www.css88.com/demo/css3_Animation/

很悲剧的是css3动画现在只有WebKit内核的浏览器(Safari和Chrome)支持,虽然应用还不是时候,但是效果却不可低估。

在哪里定义动画效果?

css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类js中的鼠标事件来定义。

动态伪类 起作用的元素 描述
:link 只有链接 未访问的链接
:visited 只有链接 访问过的链接
:hover 所有元素 鼠标经过元素
:active 所有元素 鼠标点击元素
:focus 所有可被选中的元素 元素被选中

js的事件也可以,比如click,focus,mousemove,mouseover,mouseout等等

transition的基本语法:

css3动画通过transition属性和其他css属性(颜色,宽高,变形,位置等等)配合来实现。

transition的语法:

transition : [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*

当然这是简写,我们也可以完整的写:

transition-property : none | all | [ <IDENT> ] [ ‘,‘ <IDENT> ]*;

transition-duration : <time> [, <time>]*

transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

transition-delay : <time> [, <time>]*

继续阅读