CSS动画

 主页   资讯   文章   代码   电子书 

Now you know CSS animation!

你已经完成了 CSS Animation 101!希望这本书对你有帮助。

在我们结束之前,让我们来看看一些你可能想要收藏的资源,并进一步地学习 CSS 动画。

CSS Animation cheatsheet

我准备了一个备忘录清单,总结了过渡和动画的不同属性。它正好有一张 A4 纸的大小,尽情享受它吧。

Resources to bookmark

知道如何创建 CSS 动画和过渡是件好事,但有时在现有平台上构建是很方便的。这里有一些很棒的工具,我们可以用它们来节省开发时间,提升开发效率。

Animate.css

Animate.css 给自己的定位是---just add water.你可以引用 CSS 文件并添加任何动画类来查看它们的运行情况。这里有一些例子.

Hover.css

是一个不错的替代品,Hover.css 是另一种可用于链接、按钮、徽标或任何其他 HTML 元素的动画。

Other tools

CSS 动画很强大,而且不需要借助 JavaScript 等其他技术就可以实现很多功能。然而,它并不是适合所有的情况。有时候需要更复杂的动画,JavaScript 能够帮助我们提高效率。最好的包都是构建在 CSS 之上,可以利用它的速度以及浏览器兼容性,但这会让你做更多的工作。

GSAP

Greensock Animation Platform 能够提供基于 JavaScript 的方法,以便创建出更高级的动画。它能够提供友好的操作接口以及稳定的性能。虽然它的学习曲线比较陡峭,但是它是一个很强大的工具。

Snabbt.js

Snabbt 能够以强大、优雅的方式、用自定义的定时函数去创建更复杂的动画。它能为浏览器生成动画转换矩阵,从而获得非常好的性能。

CSS Animate

CSS Animate 是一个生成关键帧动画的工具。它可以通过拖拽一个对象并使用时间轴来设计动画。

Cubic-bezier.com

如果你想创造出一种生活的感觉时,我推荐的工具是:Cubic-bezier.com.这个简单的工具可以帮助你优化时间函数,另外,Chrome浏览器的检查器中也内置了类似的工具。

Next steps

一些人提出的一个问题是:“我们如何才能越过101个阶段?”

我的建议是「挑战自己」。去这些网站上找寻灵感---Dribbble.comCodePen.io。从一些流行产品、电影或电视节目中寻找创意。我会思考,我该如何在 Web 上实现这种效果?CSS 会是一种好的方法么?

你还可以去阅读这些网站上的博客---CSS TricksSaraSoueidan.comCSSAnimation.rocks

所以,如果你不想遗忘这些知识,那就开始练习把。找到你感兴趣的东西,试着去做一些改变,那么你会发现这些知识对于你来说是非常简单的。

Don't be a stranger, now

你是否受到了启发,想去尝试一下 CSS 动画?如果你有一些很炫酷的动画或者任何疑问,请让我知道。我很期待你的来信。

你也可以在 twitter 上与我交流(@donovanh)。

最后,感谢你阅读本书。