超实用!可视化CSS3动画生成神器Stylie


自从CSS3引入了动画(transition和@keyframes,还有与之搭配的transform)之后,各路人马对它的热情都极为高涨,和JS动画相比,它写起来更简单(在没有jQuery库的情况下),同时在大多...
       自从CSS3引入了动画(transition和@keyframes,还有与之搭配的transform)之后,各路人马对它的热情都极为高涨,和JS动画相比,它写起来更简单(在没有jQuery库的情况下),同时在大多数情况下性能上也有很强的优势。transition和transform相对比较简单,除了矩阵变换(一般人也用不到)之外,别的都易学好懂,而使用了@keyframes的动画,简直就是设计师和工程师的大杀器,关于这东西有多杀,可以参考之前腾讯的大神们搞的一个CSS3动画帧数科学计算法这样的玩意儿,内含计算器一枚,内文之纠结复杂,我相信一般兼职半个前端的大设计或者初入行的小前端都是难以看懂的…
       而且其实主要问题是,那玩意儿是为步进动画准备的,做一张精灵图,然后每隔一定时间跳一张…其实这样算不上一个真正的css动画,何况animation属性中的steps()功能可以比较好地解决这个问题。而一直以来,都没有一个好的css动画生成工具(别跟我提Muse,它需要阅读《工具的自我修养》…)所以今天我想推荐的就是这个Stylie,一个可视化自动生成CSS3动画的工具。
Stylie操作简介
       页面打开以后很简单,蓝色的网格背景上面,两个绿色的十字中间连着一根黄色的线,上面有一个白色小球不断地从左边滑动到右边(还称不上滚动),下面有一个进度条,右边有一个操作面板。


Keyframes标签面板


       第一个0ms处表示起点相关信息,第二个2000ms处表示2000ms处断点的相关信息;

       2000ms可以单击修改它的时间,单击右上角的加号可以添加新的断点

       X和Y分别表示横坐标及纵坐标(其实你也可以用鼠标去拖绿色的十字…);

       S表示缩放倍率(默认是1);

       rX、rY、rZ分别表示物体沿X、Y、Z轴的旋转角度(具体哪个轴是哪个可以在上面填写数字自己尝试,出于便于观察的理由建议填写180。当然你也可以按住Shift键,拖,但是我觉得这样很不好控制…);

       linear表示线性的…这一栏是自定义缓动曲线(Easing curves)

缓动曲线


       这个工具比较流弊刷刷的一点就在于它的缓动曲线功能,所有的数值,都!可!以!定义缓动。下面我稍微说一下它的缓动:


       In和Out分别代表进入时和结束时,缓动顾名思义就是有一个类似“缓冲”的动作,如同汽车加速是慢慢加起来的,人跑步也是慢慢停下的(急刹车也是很难从高速直接降速到静止的,总有个减速的过程)。

  • Quad - x^2(二次方曲线)
  • Cubic - x^3(三次方曲线)
  • Quart - x^4(四次方曲线)
  • Quint - x^5(五次方曲线)
  • Sine - sin(x^(pi/2))(长相有点像二次方曲线,实际上这个函数很奇葩,有兴趣的童鞋可以移步这里看一下[0,3]的图像…)
  • Expo - 2^(10(x-1))(我放弃起名字了,总之是一个开始非常非常慢,中后期非常非常快的东西)
  • Circ - 顾名思义就是弧(1/4圆,如果选择了InOut就是两个外切的1/4圆)
  • Bounce - 公式太长不写了,就是个反弹曲线(弹簧效果、小球落地)
  • v10. Back -反弹曲线
  • elastic - 橡皮筋曲线(有一个非常短暂且巨大的晃动,然后缓缓结束)
  • swing - 跟Back系列一样

       后面的就没什么了,最后一个为CustomEasing,这个曲线可以自己在Motion选项卡中编辑,经常用AI的童鞋可能比较容易编辑,但是不理解曲线跟运动速度之间的关系的话,就根本搞不懂自己在编辑什么…


       上面说了那么多曲线…它其实代表的就是一个速率的变化(可以把起点和终点放在非水平或垂直的同一条直线位置上,然后改变X和Y的Easing Curves,本质上它和我们初高中物理课上画的那些撞车线抛物线没什么不同…)。对于那些想预览简单微小动效的人来说,可以把起点和终点放在比较近的位置上,然后改变Easing curves察看效果。


导出代码


       效果满意之后,就可以点击CSS和HTML标签分别复制代码了。

标签: css3动画css

更多 css3动画 相关资讯

jQuery/CSS3实现超酷的动画Tab菜单

jQuery/CSS3实现超酷的动画Tab菜单

这是一款基于jQuery和CSS3的动画Tab菜单,这款Tab菜单是以单选框Radio为原型的,通过CSS3样式特性对radio的渲染,形成了一个外观看上去像tab菜单的样子。另外特别的是,tab

更多 css 相关资讯

jdists(<>) 前端代码块预处理工具

jdists(<>) 前端代码块预处理工具

什么是 jdists 项目地址:https://github.com/zswang/jdists 关于命名 j dist s 就是 js 里插入了一个 dist (分发),避免和其他组件命名冲突,同时特殊好记。 本工具专注于前端代码

10款Web程序员必备的CSS工具

10款Web程序员必备的CSS工具

对于web开发来说,CSS是最有效的美化页面、设置页面布局的技术。但问题是,CSS是一种标记性语言,语法结构非常的松散、不严谨。WEB程序员会经常发现自己的或别人的CSS文件

一款先进的 CSS3 代码生成工具EnjoyCSS

一款先进的 CSS3 代码生成工具EnjoyCSS

EnjoyCSS 是一款先进的 CSS3 代码生成工具,可以让你摆脱日常的编码。它方便和易于使用的用户界面允许您快速,无需编码就可以调节出丰富的图形样式。您将能够玩转所有的 EnjoyC

2015年3月新鲜出炉的网页前端开发工具

2015年3月新鲜出炉的网页前端开发工具

网页前端开发人员必须关注当下流行的工具,我们为了帮助前端开发者们找到好的高效的开发工具,我们转载分享了这些。我们分享的这些工具希望对您有用,例如:生成工具、jQuery插件、

BLACKHOLE – 易于定制、轻量级的SASS/CSS框架

BLACKHOLE – 易于定制、轻量级的SASS/CSS框架

前端框架有很多,比如使用人气很高的Bootstrap、foundation、ionic等,不过当太多人使用后,界面就差不多一个样子了,所以如果有新的框架出来,可以尝试一下,换个新界面,来点新鲜感也很

2015年2月新鲜出炉的网页前端开发工具

2015年2月新鲜出炉的网页前端开发工具

网页前端开发人员必须关注当下流行的工具,我们为了帮助前端开发者们找到好的高效的开发工具,我们转载分享了这些。我们分享的这些工具希望对您有用,例如:生成工具、jQuery插件、

Less.js 2.4.0 发布,CSS 预处理器

Less.js 2.4.0 发布,CSS 预处理器

Less.js 2.4.0 发布了,该版本改进内容包括: 支持预处理的插件,可用于静态添加库支持空的 sourcemapsExtract 和 Length 函数忽略列表中的注释碎片 URL 在 HTML 文档中的

14个最佳的HTML/CSS设计和开发框架

14个最佳的HTML/CSS设计和开发框架

专业的网页设计是既复杂又耗时的。它需要HTML和CSS框架的完美结合。这些框架不仅可以为设计方案增加特定的功能,还可以大大地节省时间和精力。 高效的框架不仅是

Bootstrap 3.3.2 发布

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以

8个提高效率的CSS实用工具

8个提高效率的CSS实用工具

CSS,也就是Cascading Style Sheets,推出于1997年,差不多是17年前,至此为我们开发网页大开方便之门,协助我们制作出一个又一个惊艳绝伦的网站设计和模板,提升了我们的创造