写动画其实很简单啦。
动画的英文有很多表述,如animation、cartoon、animated cartoon、cameracature。
其中较正式的 “Animation” 一词源自于拉丁文字根anima,意思为“灵魂”,动词animate是“赋予生命”的意思,引申为使某物活起来的意思。
 
那么:

  • 动画要有时间在指定的时间内完成某些动作:animation-duration(动画所花费时间,毫秒或秒记)属性必不可少。
  • 一个页面可以有很多个动画,也可以重复使用,所以为了区分动画,肯定要有动画的名称:animation-name(动画名称)。
  • 动画的执行速度,可以以线性方式完成,也可以以曲线方式完成。所以,为了动画执行更丰富,提供了速度曲线的设置方式:animation-timing-function (它的值可以有:linear,ease,ease-in-out…等等等。)
  • 也提供了动画什么时候执行的选择,即延迟执行时间:animation-delay
  • 动画么,可以执行一次,也可以执行N次。因此提供了:animation-iteration-count(规定动画应该播放的次数。可以是具体数值,也可设置成infinite无限次播放)。
  • 很多电影效果里可以看到有反向播放的效果,比如,破碎的玻璃被还原成未摔下桌子之前的一个玻璃杯,那么animation-direction 可以规定是否轮流反向播放动画。
  • 有的时候动画播放完,就会回到最初的状态,怎么样才能让它停留在动画执行后最后的状态呢?可以使用animation-fill-mode: forwards;声明来控制。
  • 那么动画播放的过程中,我们想让它暂停怎么办?使用animation-play-state: paused;声明。

 
那么讲到这里,我们发现,能想到的可能性我们都可以对它进行控制。
所以,你可以想怎么写就怎么写。
 

animation

animation 属性是一个简写属性,用于设置多个动画属性:
 
下面是animation的简写语法:

 

描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
自定义曲线点击这里
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
animation-fill-mode 规定动画在播放之前或之后,其动画效果是否可见
animation-play-state 规定动画正在运行还是暂停。

 

那什么是CSS3 Animations?

 
Animations 可以让一个元素逐步地从一个样式更换到另外一个样式。
你可以写很多个CSS属性,让元素在一个周期内变换N次样式。
使用CSS3 Animations,你必须指定一些关键帧(keyframes)来执行动画。
指定关键帧后,浏览器会使元素在关键帧样式之间进行相应的变化。
关键帧是什么?关键帧就是重要的帧,那帧是什么?帧就是影像动画中最小单位的单幅影像画面。
比如,设定某个元素的第一帧样式为红色。最后一帧样式为绿色。再设定完相关的设定,比如动画执行时间3秒。
那么浏览器会在三秒之内把该元素的样式,从红色变成绿色。那么中间过渡的效果,浏览器会按照预定规则进行渲染。
所以我们只要做关键帧就可以了。
关键帧定义,我们也可以说是动画的定义,使用@keyframes来定义。
 

@keyframes

 
比如刚刚说的红变绿的,我们定义为change。写法是:

定义完,我们要把这个动画绑定到指定元素啊。假设我们绑定到.lucy这个元素,写法是:

这样,打开页面浏览,就可以看到动画在执行了。
这里补充一点是,如果不设置动画过渡时间,那么就不会有效果产生,因为animation-duration默认值是0。
另外,我们看到.lucy默认有background-color: red声明,我们也建议,把第一帧的样式写进默认样式里。这样,动画执行的时候,刚开始的衔接也会非常流畅,否则可能会出现闪一下,跳帧的情况产生。
 

@keyframes用百分比表示

 
上面的例子我们有看到,第一帧用了from开头。最后一帧用to结尾。那么也可以把第一帧写成是0%,最后一帧写成100%。
 
如下:

那么,刚介绍关键帧的时候我们也说过可以添加无数个关键帧,无数个声明。所以,也可以这样:

效果如下:
(动画延迟3秒执行)


 
上面的样式,我们也可以按简写样式的规则写成下面的样子:

如果,动画完成后,保持最后的样式,绿色,而不是切换到初始色红色,我们可以:

如果想让动画,无尽循环播放:

 
当然,目前也有部分老浏览器在市面上运行,所以我们要适当写兼容性代码。比如webkit核心浏览器:谷歌浏览器,safari浏览器。针对它的写法是:

注意!建议标准写法在最下面。除非你想对不同核心的浏览器执行不同的动画。
 
本节课最后是一个css3动画制作的幻灯片的效果。
 
https://10.1pxeye.com/docs/slide-top/
 
CSS3动画部分动画代码如下,详细代码请查看页面源文件。

本篇文章相关标签: