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.com、CodePen.io。从一些流行产品、电影或电视节目中寻找创意。我会思考,我该如何在 Web 上实现这种效果?CSS 会是一种好的方法么?
你还可以去阅读这些网站上的博客—-CSS Tricks、SaraSoueidan.com、CSSAnimation.rocks。
所以,如果你不想遗忘这些知识,那就开始练习把。找到你感兴趣的东西,试着去做一些改变,那么你会发现这些知识对于你来说是非常简单的。
Don’t be a stranger, now
你是否受到了启发,想去尝试一下 CSS 动画?如果你有一些很炫酷的动画或者任何疑问,请让我知道。我很期待你的来信。
你也可以在 twitter 上与我交流(@donovanh)。
最后,感谢你阅读本书。