CSS3动画参考

2

css3_animation

写在最前

随着浏览器对CSS3动画的支持越来越好(IE除外,IE10用户量还非常的少),以前很多只能用flash或者javascript实现的动画效果,现在用CSS3动画也能部分的实现了。作为一个前端攻城狮,我们有足够的理由去使用CSS3动画让用户有更好的体验。

在使用CSS3动画设计构思前,我们须改变所有的浏览器都保持一致的思想,在不支持CSS3动画的主流浏览器里面保持最基本的功能体验,让支持CSS3动画的浏览器给用户提供更优的用户体验。

CSS3动画参考工具

「CSS3动画参考」动画工具交互稿

经过对目标用户的使用习惯与诉求采样分析,动画工具经过多次讨论后确认采用左右结构,左侧是三个TAB切换,可设计“变形过渡”、“自定义动画”与“预设动画库”,右侧是效果预览区,方便即时检验动画的预期。

设计面板提供三种模式的混合:设置条拖动智能调整大概数值,手工输入数值精确调整,预设效果与贝塞尔曲线混合,更多的操作发现可在体验中获得。

右侧预览区域,可把本机图片拖动到区域内替换默认图片,以获得更接近的动画效果。
在“自定义动画”设置时,右侧下面还提供一个时间轴动画层集合的调试区域(如上图),可在关键帧设置其时间位置与数值,或删除关键帧。

传送门

整理自 腾讯ECD

共 2 条评论

  1. 回复

    希望不久就能够用html5消灭flash,需要我们这些coder继续折腾呀!

    • 回复

      按照国内的进度,有的等了。

回复 谢泽文博客 X

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 必填字段 *

为何看不到我发布的评论?

正在提交, 请稍候...