Animation

使用CSS3实现60FPS动画

使用动画在移动应用程序中很容易的。如果您遵循我们的建议,移动应用程序中使用动画变得很简单。虽然现在很多人在移动应用程序中使用CSS3 Animation来制作动画,当然很多人也不这么做。很多最佳实践,还是不断的被忽视。出现这种情况主要是因为仍有许多人并不真正了解这些最佳实践存在的真正原因,因此没有大力的支持。

【转载】使用 FLIP 来提高 Web 动画的性能

CSS 动画已经存在很多年了,使用恰当可以很好地提高网站的用户体验,也正是由于其容易使用,就很可能出现性能低下的动画,从而降低了整个页面的运行效率。回想一下:你曾经是否使用过 CSS 来改变元素的宽度、高度或绝对位置?如果回答是肯定的,就意味着你触发了性能低下的重排或重绘计算,在某些情况下甚至可能导致页面闪烁

使用Sass来定义Keyframes

CSS的Animation成为Web Animation中主要实现方式之一。使用CSS 的animation可以在Web中实现一些动画效果。而其中最为关键的还是依赖于@keyframes,让动画可以根据帧定制不同的动画效果。

SVG动画案例的学习

平面设计已成为2016年可见的趋势,显然,这就是SVG用法又重新走入人们的视野的原因。好处有很多: 独立的分辨率、跨浏览器兼容性以及DOM节点的可访问性。本文中,我们将看看如何使用SVG从简单的插图创建看似复杂的动画。

【转载】CSS分层动画可以让元素沿弧形路径运动

CSS 的 animations (动画)transitions(变换)擅于实现从点 A 到点 B 的直线运动,运动轨迹是直线路径。给一个元素添加了 animation 或者 transition 以后,无论你如何调整贝塞尔曲线,都无法让它沿着弧形路径运动。你可以通过自定义 timing function 属性,做出弹动的效果,但是它沿着 XY 轴相对移动的值永远是相同的。

CSS的motion-path属性

在CSS中要实现一个动画按一个指定的路径运动,相对而言是较为困难的。虽然通过transform能模拟出来一定的效果,但要达到很完美的效果是非常的痛苦的,也较为困难的。那么今天给大家介绍的motion-path属性虽然 还未成为W3C中的正式规范,但这个属性能帮助大家轻易实现一个动画按指定路径运动。

重新创建Twitter点赞动效

最近,我在CodePen上看到了一个Twitter心形点赞动画。一般,如果我有时间就会研究案例代码,看是否可以进行利用或更改。在这个案例中,我很惊讶的看到演示使用的是Sprites图片。后来我学习了Twitter对其实现的原理。当然,这可以不使用图片就可以实现,不是吗?

纯CSS实现滚动3D字幕

一直以来我都想做一个滚动文本的效果,虽然有几种方法实现,其中还有使用WebGL的方法。但我还是想使用HTML和CSS来实现这样的效果。很多年以前,在Web上实现滚动文本的动画效果一般是采用marquee标签来实现,当然也有很多同学采用JavaScript来实现类似的效果。前几天在CodePen看到有位大神使用纯CSS制作了一个3D的滚动文本效果,仔细看了一会,没想到thenewcode.com/就有介绍这个案例的文章,今天将篇文章翻译出来和大家一起分享。

给用户界面添加缓和效果(Easing Curves)

自从Web界面引入平面设计之后,动画的质量变得越来越重要。通过给界面添加动画效果,可以直接影响产品的整体风格,动画也可以让复杂的交互变得简单,优秀的动画设计也能更好的提高用户体验。但如何创建一个高质量的动画呢?Easing Curves就变得很重要,它也成为动画的一个核心功能,能让动画变得更棒。

【转载】关于动画,你需要知道的

在浏览器里,动画实现的基本原理非常简单明了,其实就是采用定时器改变显示元素的一些属性的过程。不管是 JavaScript 操作 DOM 的动画,还是 CSS3 动画,还是 Canvas 动画,或者 SVG 动画,区别只是使用的 API、何种定时器,影响什么环境(DOM/Canvas/SVG/WebGL)。

页面

返回顶部