CSS3 Animation

之前一直在用cocos等编辑器做动画，最近想学习一下使用CSS3实现一些基本的动画。所以，将这两种动画开发模式，进行对比学习或许会有更深的理解与体会。

什么是动画

在学习CSS3动画之前，我们必须先介绍一个什么是动画，动画都具有哪些特性。
动画是将静止的画面变为动态的艺术．实现由静止到动态，主要是靠人眼的视觉残留效应。

什么是关键帧(keyframes)

想一想如果制作动画，如果没有关键帧这种技术会是多么恐怖，如果动画帧率为25，即每秒要播放25张画面，假设现在要制作1秒的动画，那么就需要手动制作25张画面，关键帧的出现使得我们只需要画2张画面，中间的23张画面自动计算完成，极大的提升开发效率。

拓展延伸:逐帧动画和关键帧动画

简单的例子

我们先来看一组简单的动画。
点击播放动画
片段1

片段2

片段3

片段4

我们可以从上图看到，该动画主要分为四个片段：

0s: 起始阶段的状态

 width: 10px;height: 100px;margin: 0 auto;text-align: center;color: rgba(0, 0, 0, 0);background-color: #f35626;background-clip: text;

0s-2s: 高度变为300px,背景色改变。

 height: 300px;background-color: wheat;

2s-4s:宽度变为600px

 width: 600px;

4s-8s:文字透明度由0变为1。

 color: rgb(66, 66, 66);

总结

结合文章开头讲的关键帧技术，我们可以将我们的动画的四个片段作为四个关键帧，其余的过程就交给计算机进行自动绘制。那么制作一个动画的步骤简单分为下面几个步骤:
1. 创建关键帧
首先我们要设计好播放动画的基本属性，一般常用的属性有：位移属性(position),旋转属性(rotation),缩放属性(scale),当然还有其他的属性：透明度(opacity),音效(audio)等。
2.设置要播放动画的参数
关键帧我们制作完成之后，但是我们的动画时长播放多久，哪一秒播放对应的关键帧，这些都是我们要考虑的问题。
即我们想要在延迟2s后再将我们的宽度边长，延迟4s后再显示文字。

下一章我们继续讨论CSS3中的 Transition & Animation中的一些用法和特性。

CSS3（一）动画原理相关推荐

使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
php人物行走,非常震撼的纯CSS3人物行走动画
今天分享给大家的是一个用纯CSS3实现的人物行走动画,在没有使用JavaScript的情况下,用CSS3技术将人物行走的姿态描绘得非常逼真.其实动画实现的原理也是比较简单的,将人物行走时的状态分割成多 ...
如何停止CSS3的动画？
前言我们在移动端一般使用zepto框架,与其说zepto是jquery的轻量级替代版,不如说是html5替代版我们在js中会用到animate方法执行动画,这个家伙可是真资格的动画,完全是css一 ...
漂浮的云朵html,CSS3之动画模块实现云朵漂浮效果
动画模块-云层效果 * { margin:0; padding:0; } ul { height: 400px; background-color: skyblue; margin-top: 100p ...
css3 3d 太阳系,使用css3的动画模拟太阳系恒星公转
原标题:使用css3的动画模拟太阳系恒星公转本文介绍使用css3的animation画一个太阳系恒星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际 ...
8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画如 ...
11月14日云栖精选夜读 | 动画+原理+代码，解读十大经典排序算法
排序算法是<数据结构与算法>中最基本的算法之一. 排序算法可以分为内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过 ...
CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...
html与css结合动效案例,CSS3制作动画效果例子
实现网站的图片.文字的动态效果,我们有photoshop制作多帧动画GIF.用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果.然而,即使 ...
bada 2D游戏编程之十——关键帧动画原理
bada 2D游戏编程之十--关键帧动画原理前面提到的逐帧动画有一个关键的缺点就是需要为动画中的每一帧都提供一张单独的图片,由于每一帧的图片都需要单独提供,制作起来比较麻烦,图片量也比较大.用关键帧 ...

CSS3（一）动画原理

CSS3 Animation

什么是动画

什么是关键帧(keyframes)

简单的例子

总结

CSS3（一）动画原理相关推荐

最新文章

热门文章