看到的一个demo,实现一遍:

一个简单的demo,表现了日出而作,日落而息的场景,让我们来看看是怎么实现的:

img

首先我们要知道一个关键帧的概念,其实就类似于给每一个动画照相,照出来的照片就是这个动画里的某一帧,而css3的animation就是通过分别定义某一张照片的样式,再定义一个持续时间,然后它自己会把这几帧连起来形成动画。

首先对这个场景进行分离,分别是我们需要给其加上动画的几个元素,有最基础的,天空,大地,然后是太阳,云朵,月亮。

还要定义animation每个属性的属性值:

	animation-name: sky;/*动画名称*/
    animation-duration: 10s;/*周期时长*/
    animation-timing-function: ease;/*规定动画速度曲线*/
    animation-iteration-count: 1;/*规定动画播放次数*/
    animation-direction: normal;/*动画方向*/
    animation-play-state: running;/*是否暂停*/
    animation-fill-mode: forwards;/*设置对象状态为动画开始时的状态*/

每一帧就是一个状态,天空和大地比较简单,都分别有两种,天黑天亮,如下:

See the Pen scene1-sun-1 by puronglong (@puronglong) on CodePen.

然后是太阳,太阳初升和日落时是红色的,正午呈黄色,升起和降落的位置有所变化,并且它的层级应该在大地后面,天空前面,如下所示:

See the Pen scene1-sun-2 by puronglong (@puronglong) on CodePen.

云朵从左边过来,慢慢往右边行走,注意这里的云朵其实是由三个div做成的,这里通过border-radius分别设置垂直半径和水平半径形成一个椭圆,三个叠加在一起就形成一个抽象的云朵啦,而云朵的层级还要在太阳之上,要盖住太阳,如下:

See the Pen scene1-sun -3 by puronglong (@puronglong) on CodePen.

最后需要添上的就是我们的月亮姐姐啦,要等天黑以后再出来,月牙形的是由两个圆形制作的,不过其中一个圆形的颜色和天黑的颜色一样所以看不出来罢了,月亮出来后云朵为什么要那么快躲起来呢,有云,月黑风高夜,杀人放火时,😂

See the Pen scene1-sun-4 by puronglong (@puronglong) on CodePen.

以上就是一个简单场景中对css3中animation属性的运用。