CSS3的animation类似于transition属性，他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点，css3的animation就需要明确的动画属性!

animation 的css属性有很多，本文通过 animation-name 来控制启动动画和转换动画，以下是一个通过 animation 来控制元素的显示和隐藏的例子（仅支持webkit）：

之所以要用俩动画(slideIn和slideOut)，原因是：slideIn动画是把元素滑动进来，这时元素样式已经定为fadeIn动画100%时的样式了，就算把show样式删去也对元素没影响，所以这时要用slideOut动画把元素滑动出去才行。

<button onclick=”fadeIn()”>显示</button>

<button onclick=”fadeOut()”>隐藏</button>

-webkit-animation-fill-mode:both; 这个样式是为了动画完成后保留动画完成时的状态，如果不加这个样式的话动画完成后又会弹回原来状态了。

js调用：

<script>

function fadeIn(){

div.classList.add(‘show’),

div.classList.remove(‘hide’);

}

function fadeOut(){

div.classList.add(‘hide’),

div.classList.remove(‘show’);

}

</script>