写动画其实很简单啦。
动画的英文有很多表述，如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 duration timing-function delay iteration-count direction fill-mode play-state;

 

值	描述
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。写法是：

@keyframes change {
    from {background-color: red;}
    to {background-color: green;}
}

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

.lucy {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: change;
    animation-duration: 3s;
}

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

@keyframes用百分比表示

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

@keyframes change {
    0% {background-color: red;}
    100% {background-color: green;}
}

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

 @keyframes change {
	 0% {
	 background-color: red;
	 opacity: 1;
	}
	 14% {
	 background-color: white;
	 opacity: 0.5;
	}
	 74% {
	 background-color: blue;
	 opacity: 1;
	 transform: translateX(100px)
	}
	 100% {
	 background-color: green;
	 transform: translateX(0)
	}
}
.lucy {
	width: 100px;
	height: 100px;
	background-color: red;
	animation-name: change;
	animation-duration: 5s;
	animation-delay: 3s; 
}

效果如下：
（动画延迟3秒执行）

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

animation: change 5s 3s;

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

animation: change 5s 3s forwards;

如果想让动画，无尽循环播放：

animation: change 5s 3s infinite;

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

 @-webkit-keyframes change {
（此处已省略）
}
 @keyframes change {
（此处已省略）
}
.lucy {
	-webkit-animation: change 5s 3s infinite;
	animation: change 5s 3s infinite;
}

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

@keyframes slidetop {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }
    8% {
        transform: translateY(0);
        opacity: 0.7;
    }
    16% {
        opacity: 1;
    }
    28% {
        transform: translateY(0);
        opacity: 1;
    }
    35% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(10%);
    }
}
#slidertop ul li {
    animation: slidetop 15s ease-in-out infinite 0s;
}
#slidertop ul li:nth-child(1) {
    animation-delay: 0s;
    z-index: 3;
}
#slidertop ul li:nth-child(2) {
    animation-delay: 5s;
    z-index: 2;
}
#slidertop ul li:nth-child(3) {
    animation-delay: 10s;
    z-index: 1;
}