前言
CSS 动画可以使网站变得更加生动有趣，增加用户的体验感。当我们需要为网站添加一些弹出效果时，可以运用 CSS 的 transition 和 animation 属性。在本文中，我们将学习如何运用 CSS 达到弹出动画效果。
transition
CSS3 transition 属性用来控制一个元素在不同状态间过渡所需要的时间、速度曲线和延迟等效果。该属性需要有至少两个 CSS 属性值才能定义动画，一般是将目标属性设置为起始状态和结束状态。
下面是一个实例，实现了当鼠标悬浮在按钮上时，按钮呈现出缩小的效果：
.btn {
padding: 10px 15px;
font-size: 16px;
background: #55c9cf;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover {
transform: scale(0.9);
}
我们设定了按钮有一个高度和宽度上的变化，设置形如 "transition: all 0.3s ease" 的属性即可。这里的 all 表示所有属性过渡都是 0.3s，这里是针对鼠标悬浮时的效果让按钮变小。也可以针对其他状态，比如 active、focus、visited、link 等，达到不同类型的过渡效果。
transition 常用的属性
CSS transition 常用的属性有以下几种：
- transition-delay: 动画开始前的延迟时间
- transition-duration: 动画的持续时间
- transition-property: 要动画化的 CSS 属性的名称
- transition-timing-function: 动画执行速度曲线
使用关键词 none 可以禁用 transition
例如有时候我们需要关闭过渡动画下的小箭头的动态效果，即将小箭头在hover状态下过渡到其他 Places 的时候在保持状态和不过渡状态之间需要去掉箭头的过渡效果。此时，我们可以使用 transition 关键词 none 来禁用过渡动画，具体代码实现如下：
.nav {
background-color: #f6f6f6;
padding: 8px 16px;
}
.nav li {
display: inline-block;
padding: 0 16px;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
margin-left: 8px;
vertical-align: middle;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #929292;
transition: all .2s ease-in-out;
}
.arrow:hover {
transform: translateY(-2px);
}
.arrow:active, .arrow:focus {
transform: translateY(-1px);
outline: none;
transition: none; /* 关键词 none 禁用过渡动画 */
}
通过使用 transition:none，当 arrow 鼠标悬浮时调用移动动画，松开鼠标后动画持续按键帧执行。
animation
CSS3 animation 属性用来创建动画效果，包括类似帧动画的关键帧动画和改变CSS属性的过渡动画。animation 属性中包括了多个子属性，分别是：
- animation-name: 指定要绑定的关键帧动画名称。
- animation-duration: 定义了动画的时长。
- animation-timing-function: 指定了动画变化的速度曲线。
- animation-delay: 延迟动画开始的时间。
- animation-iteration-count: 定义了动画播放的次数。
- animation-play-state: 控制动画的播放和暂停。
- animation-direction: 指定动画应该向前播放、向后播放还是交替播放。
下面是一个实例，实现了当页面加载时，一个 div 框变成红色：
div {
width: 200px;
height: 200px;
background-color: blue;
animation: myanimation 2s forwards;
}
@keyframes myanimation {
from {background-color: blue;}
to {background-color: red;}
}
在上述声明中，animation 属性指示了要使用 myanimation 动画，并将持续时间设置为 2 秒。这个动画将从蓝色开始，并在两秒钟之后到达红色的状态。
关键帧动画
类似帧动画的关键帧动画可以使我们更加灵活地定义 CSS 动画。关键帧动画会从开始位置到结束位置之间平滑地过渡，并且您可以控制这种平滑过渡过程中产生的任何控制点。
下面是一个实例，在动画过程中，一个按钮会沿着一个三次贝塞尔曲线从开始位置移动到结束位置：
.btn {
display: inline-block;
padding: 8px 20px;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
background-color: #d03c50;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: move 2s ease-in-out forwards;
}
@keyframes move {
0% {
opacity: 0;
transform: translate(-50%, -50%) translateX(-40px) rotateY(-720deg);
}
25% {
opacity: 1;
transform: translate(-50%, -50%) translateX(10px);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) translateX(0px);
}
75% {
opacity: 1;
transform: translate(-50%, -50%) translateX(10px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) translateX(0px);
}
}
在上述代码中，我们使用了关键帧动画 "move"，实现了按钮从左下角慢慢弹出的效果。
animation 和 transition 的区别
transition 和 animation 属性虽然都可以实现动画效果，但是在性能上有着一定的区别。动画的性能问题很大程度上由浏览器栅格（rendering）习惯所决定的。当渲染一个网站的时候，浏览器需要先“绘制”（Paint），将每个元素在浏览器中描绘出来，然后才能“排版”（Layout），即通过算法来确定元素的折叠排布。最后，浏览器会开始“复合”（Compositing），将各个层叠在彼此上面，形成一个完整的Web页面。
如何避免冗余重绘操作，降低客户端内存消耗和带宽消耗？我们需要判断过渡和动画两个特点来决定使用哪一个CSS属性。
如果我们的改动只影响到元素的 transform 和 opacity 属性，我们可以使用 CSS transition 属性来处理这个过渡期 （因为这种情况下浏览器只需要更新屏幕上对应元素的透明度和位置信息）。同时我们不希望频繁触发该改动，可以在 CSS transition 属性中指定一个过渡的时间段。
如果我们的改动涉及到元素的其它属性，或者需要在几个不同的时间和状态下按照不同的曲线来渐变，那么就需要使用 animation 属性。
结尾
CSS 动画可以为网站添加新的视觉效果，使网站更加生动有趣，而 transition 和 animation 属性正是这种理念的完美体现。我们从本文中学习了这两种属性的实现方式，包括使用关键词 none 禁用过渡动画、过渡中使用的属性以及区别及适用情况等内容。建议在使用过程中，根据实际情况，选择恰当的属性及其参数，使其达到更好的优化效果。