最近，将meedu的部分付费功能从uniapp独立出来，使用vuejs开发，想给页面加上动画，提高体验，于是学习总结了下css的动画知识。

在css中实现动画主要有两种方式，分别是 transition 和 animation 。下面就分别讲解下这两者的用法和区别。

transition

transition的基础用法

它是这样使用的：

transition: property duration timing-function delay;

四个参数，这四个参数也分别可以使用 transition-property , transition-duration , transition-timing-function , transition-delay 属性分别定义。下面是参数讲解：

参数可选值说明
propertywidth,height 等css属性，全部的话则是 all动画所属元素的 css 属性
duration动画时长，如：.3s动画时长，单位：秒
timing-functionlinear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)动画执行函数，如 linear 是整个动画的执行过程速度是一致的；ease 慢快慢；ease-in 是慢速开始；ease-out 是以慢速结束；ease-in-out 是开始慢，结束慢长；cubic-bezier(n,n,n,n) 是自定义动画执行逻辑，前面的集中都是该函数的一种场景
delay动画延迟执行，如：.2s 就是0.2秒之后执行

好了，基础参数讲完接下来就给个演示。举个例子，这里有个div是100x100，红色的背景，现在我们想要实现该div在隐藏的时候有淡出的效果，淡出的效果就是慢慢的消失直至最终隐藏。

该元素的基础样式如下：

div {
width:100px;
height:100px;
background-color: red;
}

那么我们如何实现淡出的效果呢？css 中有一个属性 opacity 用来控制元素的透明度，实现淡出的效果的话，那么可以将 transition 和 opacity 结合在一起使用。首先，我们给div设定透明度为1（也就是完全不透明）：

div {
width:100px;
height:100px;
background-color: red;
opacity: 1;
}

现在我们只需要利用 transtion 将 opacity 由 1 经过一段时间过渡到 0 那么就实现了淡出的效果。于是，增加了下面的代码：

div {
width:100px;
height:100px;
opacity: 1;
background-color: red;
transition: opacity .3s linear;
}

上述的代码中，我们规定了在 0.3s 的时间内，元素的透明度将会线性的变化。那么如何执行这个动画呢？这个问题很重要，之前我就陷入了这个问题找不到原因。

transition 动画的是设定的的 property 值发生变化时才会执行。这里的变化指定的相较于原先设置的值产生了变化。比如说，上述我一开始设置div的opacity的值为1，接下来我通过js将opacity改为0的话，那么这个动画就可以执行了。

通过js控制元素的隐藏和显示是无法触发 transition 动画的执行的。

animation

animation 提供了更丰富的动画表现形式，完全自定义动画内容，功能更加强大。配合transform的属性，可以实现非常多的动画效果。

首先，请先对animation属性做一个初步的了解：animation属性

animation和需要和@keyframes配合使用实现动画效果的。animation是决定使用哪个动画，而@keyframes是定义一个动画。所以，首先，我们得需要了解@keyframes的用法，请先到这个链接@keyframes用法 对@keyframes做个简单的了解。

下面，我们用一个例子来学习。下面的代码是实现一个淡出的效果：

@keyframes fadeOut {
0% {
opactiy: 1;
}

100% {
opacity: 0;
}
}

在0%（也就是动画未开始执行）的时候，透明度为1，也就是不透明，在100%（也就是动画执行完成）之后，透明度设置为0，也就是完全透明。这样的话就设置了一个动画的执行规则。我们知道，@keyframes 中的百分比就代表着动画执行的进度，在相应的进度修改样式就会在界面上提现出来，不同进度的不同样式就产生了动画。

动画定义好了之后，我们就可使用animation来使用这个动画了：

div {
animation: fadeOut .3s;
}

上述代码就是使用fadeOut动画，并在0.3s内将动画执行完毕。

在上文讲到的transition 中，我们需要指定动画的执行函数也就是linear,ease等，这些函数决定了动画的执行速度。在animation中是不需要的，那么我们如何控制动画的执行速度呢？其实很简单，在@keyframes中我们就可以决定动画的执行速度。前面的fadeOut动画因为我们只设置了0%和100%这两个时刻的状态，也就意味着其余时刻的状态会默认按照线性速度执行。如果我们想要实现ease的先慢后快的效果的话，我们可以这样改造：

@keyframes fadeOut {
0% {
opactiy: 1;
}

50% {
opactiy: .8;
}

100% {
opacity: 0;
}
}

上述代码，在动画执行的前50%阶段，透明度的变化仅为0.2，在后50%的阶段，透明度由80改为0，可以明显看出这个速度是先慢后快的过程。所以，动画怎么执行，执行的速度是怎么样的都是在@keyframes定义好的。

下面给出一些常用的animation动画demo代码：

淡入

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

淡出

@keyframes fadeIn {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

向上滑动

@keyframes fadeIn {
0% {
transform: translateY(100%);
}

100% {
transform: translateY(0);
}
}