登录
  • 欢迎访问乐子布匹,IT技术自留地
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐子布匹吧

可视化CSS3动画生成器stylie

IT技术 卡西莫多驴 3470次浏览 4个评论

作者:IM音木       原文地址:前端业界

 

学习css3其实并不难,但是在工作用用起来,却不一定顺手,其中一部分原因就是,前端工程师在动画效果的变化上没有专门的做动效的那种感觉,不知道哪些参数应该怎么设置才能会有比较好的体验。因此在没有设计师提供动画demo的情况下,我们需要有一款能够编辑,可视化的css3调试工具。stylie就是其中非常优秀而实用的一款。
这款工具实用非常方便,直接打开stylie(http://jeremyckahn.github.io/stylie/)的网站即可实用。
主界面
stylie

stylie_tool
工具栏中的keyframes可以设置0ms的状态和1000ms的状态,同时可以在1000ms的状态栏中设置变化的贝塞尔曲线。里面有很多默认的,也可以在motion里面自己调试建立新的贝塞尔曲线,如下图:
motion
新建缓动贝塞尔曲线之后,可以在keframes中选择,然后就可以看效果了。
最后可以在下图的位置导出css样式
export

或许你还会觉得这种方式还是不够直观,在stylie页面中,如图:
mantra
点击绿色按钮可以跳转到mantra页面,这个跟stylie类似,但是可以即调即看。
参数调整界面如下:
mantra_tool

配合一些css3生成器我们可以大大提高我们工作效率。同时也可以作为一个在设计师共同讨论动效的展示手段。大大的提高的沟通的效率


版权所有丨如未注明丨均为原创丨本网站采用BY-NC-SA协议进行授权丨转载请注明乐子布匹 - 可视化CSS3动画生成器stylie
喜欢 (0)
[llxb61@sina.com]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 这个工具确实方便实用。
    wu先生2016-01-27 08:42 回复
  2. 这篇文章是前端业界原创的,作者:IM音木。原文地址
    前端业界2016-02-19 17:42 回复
    • 卡西莫多驴
      感谢纠正~已经修改 ~原文地址 http://www.imaifly.com/2016/01/19/css3-animation-tool/
      卡西莫多驴2016-02-22 18:22 回复