Animation

我们来谈谈Web动画API:简介

大概一年之前,Google在Polymer上宣布了Material Design的存在,并且表示将使用polyfill作为即将到来的统一Web动画API标准。我没有听说过这个API,但是我非常好奇,特别是它提到的MotionPath(运动路径)效果。目前尚未实现(你可以在这系列教程的Part 5中找到相关内容),但是它的目标是提供一种统一CSS、JS和SVG的方法来实现动画,这让我非常感兴趣。一年之后Chrome和Firefox已经开始实现这块内容,polyfill的进展非常平稳,所以是时候来认真研究一下它了。

使用SVG创建Cel动画

如果我告诉你存在一种图像格式和GIF一样,但它是矢量格式的?如果我告诉你这个动画的方向还可以反转?如果我告诉你可以直接拿一张普通的图像,然后让它里边的每一个不同的部分都单独地动起来,而且不同部分的速度也不一样?其实,这种图像格式就是SVG,而且已经存在,并不是我想象出来的,只是还需要一点点温柔的鼓励。

使用Sass自动化处理CSS动画

有一天,Harry Roberts有一段有关于他网站上的代码在twitter求教,如果有可能,在某些方面得到改善。Harry Roberts做的是使用keyframes的carousel动画,所以说使用一些数学计算是有可能得到相应改善。

CSS3制作球体

这篇文章通过示例一步一步的告诉大家如何使用CSS来创建3D球体效果。并且如何利用CSS的box-shadow和渐变来给3D球体添加一些光泽效果,让球体更具像是在一个3D空间。并且配合CSS的animation让整个球体运动起来。通过上面的示例再次证明了,运用好了box-shadow和渐变能制作出各种各样的效果。

[转载]调试 CSS Keyframe 动画

学会语法就可以制作 CSS 动画,但是要想做出动感、美观的动画,仅会语法是不够的。动画直接关系到用户体验,因此我们需要改进代码,从而找到正确的触发时机并掌握调试动画的方法。经过一番研究之后,我总结了一些有用的工具和方法。

苹果表动画

随着苹果表的大量生产,我想,用CSS来实现拨号动画的时候到了。在这篇文章中,我们将使用keyframe动画和一点小技巧来实现苹果标表盘进度条动画。

CSS动画

本文是为帮助您入门和熟悉CSS动画而编写的,使用它们来为您带来基于Web的接口以及为艺术带来生命。虽然W3C的CSS动画规范仍在修订中,但是如今它已经有大量的内容可以供我们使用了。对我而言,CSS动画最令人激动的事情之一是,我们可以非常轻松地使用我们已经熟悉的工具来把它们添加进我们的项目中。如果您已经精通HTML和CSS,您就不需要学习新的语言或插件来为您的项目添加动态效果了。HTML和CSS已经足够,这是一个非常大的加分!无论你只是添加一点点引人注目的设计细节,还是添加非常多的动画,都没有问题。

纯CSS写的小雨打在窗户上效果

华灯初上,窗外的雨淅淅沥沥飘打在窗户的玻璃之上。站在室内的你,望着雨中的夜色,是不是让你增添几分惆帐。似乎如此的场景只有在诗中才会出现。那么今天我们一起来用CSS技术来描绘这样的一个场景。这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAMLSass

使用CSS画个大白(●—●)

这一次我们将使用CSS来画个超能陆战队里面大白的头像。我们的做法是在一个元素上,使用CSS动态改变背景图的位置,并且加上一些线性效果。

Twitter上的点赞动画

推特最近更新了他们的点赞按钮,使用了全新的动画,而这个动画使用一组动画来实现的而不是依赖于CSS的 transitions。今天使用CSS动画的steps方法来重建这个动画。

页面

返回顶部