前言 最近在研究 css3 的动画属性 transition 和 animation,发现自己之前对这两个 css3 的动画属性并没有太多深入的理解。本篇将介绍 css3 的 transition 以及自己的一些理解。 …
标签:css3动画
CSS基础篇--CSS3图片翻转动画技术详解
CSS动画非常的有趣;这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果。其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容。本文就是要用最简单的方法向大家介绍如何创建这种效果…
CSS进阶篇--用CSS开启硬件加速来提高网站性能
中文地址:http://www.cnblogs.com/rubylouvre/p/3471490.html 原文地址:http://blog.teamtreehouse.com/increase-your-sites-p…
Velocity.js简明教程(中文版下)
Velocity.js简明教程(中文版上) 滚动动画 使用Velocity.js,你可以快速实现垂直和水平滚动动画。滚动可以与整个页面或元素相关。无论哪种方式,都要在即将滚动到视图中的元素上调用Velocity。 下面的…
CSS3 transform 对HTML文档流带来的影响
html 总是那么的惊奇 来源于“硬件加速” 年初的一个笔记,闲时整理出来。 很多网上文章都说建议打开浏览器的硬件加速,这样页面渲染速度、动画流畅性会提高。这几乎成了很多人页面制作的标配,管实际有没有用都来一个: htm…
css3动画监听以及暂停
为一个元素添加一个动画class之后你还在用settimeout来延迟下一个动作了,你out啦下面这些绝对是装逼的知识点。 1.animation动画监听 -webkit-animation动画其实有三个事件: 开始事件…
CSS 性能优化笔记
在实习做一个移动项目的时候,实现一个动画效果,在 iPhone 和 Chrome 上调试没有问题,在千元左右的 Android 机上测试问题就很大了,卡顿非常明显,百思不得其解,吐血,卒。 这个悲伤的故事就是本文的引子,…
CSS动画:有活力的链接下划线
链接下划线是非常常见的一种样式,最近做了一个非常简单的视觉效果,非常不错,可以点下面链接查看。 http://jsbin.com/zanewe/edit?html,css,output 创建这种效果是非常简单的,不需要添…
CSS3动画使用技巧与总结
构建css3动画的属性很简单,总的来说只有transform(变形),transition(过渡),和animation(动画)这三种。所以这里,更少的从介绍语法的角度,而是从使用的角度来介绍css3动画具体的每一个属性…
CSS3 案例研究与学习
loading加载效果 效果如下所示,点击预览: http://codepen.io/hawx1993/pen/YyYVpX box-shadow 属性 box-shadow: 投影方式,X轴偏移量,Y轴偏移量,阴影模糊…
「CSS3 」动画详解
CSS3 提供给了我们非常多的转换函数: 2D: translate, rotate, scale, skew. 3D: translate3d, rotate3d, scale3d, skew3d. 只需要将这些函数作…
利用 CSS animation 和 CSS sprite 制作动画
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择。今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动画的方法,可以做出类…