关于CSS3过渡以及关键帧动画的简单介绍

注册简书的第一天，想了想还是写一篇博客来让我这个有点轻微强迫症的人能看着自己的个人主页不是那么空白。刚开始用markdown来写文章速度还是受到挺大影响的，不过研究了一会儿大概也都了解。只是对于我这种习惯什么样式都可以由我自己来修改的web前端来说，还是有点不太爽的感觉！

---

闲话不多说，开始进入正题，很多刚学习CSS3的小伙伴们在学习动画的时候会碰到两个概念，一个是过渡，另一个是关键帧动画。我先各自简单介绍一下这两个东西。

过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

在使用的时候我们需要添加两个属性，一个是所需添加效果的CSS属性，一个是动画的持续时间。
我们先来看一个简单的例子，应用于高度的过渡。

div{ 
    transition: height:1s;
}

这个例子就是给高度属性添加了一个过渡效果，在div的高度发生变化时，会产生1s的过渡动画。小伙伴们可以自己试试效果！

关键帧

这个东西可是CSS3动画效果实现的关键，所有CSS3的动画基本都是由它来实现。
要实现一个动画，必须创建一个关键帧，并与相对应的CSS绑定起来。例子如下：

div{ 
    animation: test 1s;
  height: 10px;
}
@keyframes test { 
    0% {height: 10px;} 
    50% {height: 30px} 
    100% {height: 10px}
}

这是个最简单的例子，div的高度在1s内先变成30px，然后再变成10px。
animation属性后面还有好几个参数用来设置效果，这里就不细讲了。

小结

两个东西的作用都是产生动画效果。虽然过渡能实现的功能关键帧能实现，过渡不能实现的功能关键帧也能实现。你们在所有的地方应用上关键帧，但是我们本着简洁代码的原则，在一些特定的效果实现上，用过渡可以比关键帧省去很多行的代码。

应用

这是我做的自己个人网站的首页，我现在需要在下面几个内容添加一个hover效果。如下图：

在鼠标移上去的时候添加一个背景框，而且我需要这个背景框在我鼠标移上去的时候有从下往上出现的动画，在鼠标移出的时候，向下移动直到消失。

在一开始我使用了关键帧，使用关键帧的话，需要添加两个关键帧函数，一个是鼠标移入时的效果，一个是鼠标移出时的效果。因为CSS只有鼠标移入函数hover，没有鼠标移出函数。所有我只能把这个移出的关键帧函数，加到这几个内容的样式CSS当中。

但是这里出现了一个问题，在鼠标移入的动画完成之后，内容后面有一个背景框存在。但是在鼠标移出之后，之前的关键帧函数被移除了。背景框的样式会变成初始的状态，所以在鼠标移出之后背景框会直接消失。后来我在移出函数里给背景框加了一个初始状态，让他开始就显示。这样做虽然动画效果没问题了，但是又出现了一个新的问题，因为鼠标移出的关键帧函数我是加载在内容的样式CSS当中的，所以在页面第一次加载的时候，就会出现背景框向下移动的效果。

虽然我知道关键帧肯定能完美实现这个效果，但是可能得更换我这个背景框的显示方式，太麻烦。这时我突然想起了过渡效果，发现用过渡效果做这个简直太简单了。

.page-header-list-li{        
    ...   
    background-position-y: 50px;     
    transition: background-position-y 0.1s;
}
.page-header-list-li:hover:not(:last-child){    
    background-position-y: 0px;
}

只要在内容样式加个过渡效果，在hover加一个属性的变化。这个动画就做好了，根本不用像之前那样还得写两个关键帧函数来实现动画。

所以在实现一些简单的动画的时候，小伙伴们可以考虑一下过渡。这个说不定会比使用关键帧来的方便许多！！