CSS3中 animation 和 transition 俩样式都能创建动画效果，而且是后台C++执行的，所以效率比普通jQuery的js模拟动画的效率高很多，所以建议大家能用css实现的效果都用css。
transition的使用比较简单，这里就不介绍了，着重为大家介绍下 animation 。
animation 的css属性有很多，本文通过 animation-name 来控制启动动画和转换动画，以下是一个通过 animation 来控制元素的显示和隐藏的例子（仅支持webkit）：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 animation</title>
<style>
.div{width: 200px; height: 200px; background: #f00; position: absolute;
left: 0; -webkit-animation-fill-mode:both; -webkit-animation-duration: 1s;
}
.div.show{ visibility: visible; -webkit-animation-name: slideIn;}
.div.hide{ -webkit-animation-name: slideOut;}
html, body{height: 100%; margin:0; padding: 0;}
.wrap{width: 960px; position: relative; height: 90%; overflow: hidden; border: 1px solid #000;}
.btns{position: absolute; bottom: 20%;}
@-webkit-keyframes slideIn{
0%{left: 1500px;}
50%{left: 100px;}
100%{left: 0;}
}
@-webkit-keyframes slideOut{
0%{left: 0;}
50%{left: 100px;}
100%{left: 1500px; visibility: hidden;}
}
</style>
</head>
<body>
<div class="wrap">
<div id="div" class="div"></div>
<div class="btns">
<button onclick="fadeIn()">出现</button>
<button onclick="fadeOut()">隐藏</button>
</div>
</div>
<script>
function fadeIn(){
div.classList.add(‘show‘),
div.classList.remove(‘hide‘);
}
function fadeOut(){
div.classList.add(‘hide‘),
div.classList.remove(‘show‘);
}
</script>
</body>
</html>
之所以要用俩动画(slideIn和slideOut)，原因是：slideIn动画是把元素滑动进来，这时元素样式已经定为fadeIn动画100%时的样式了，就算把show样式删去也对元素没影响，所以这时要用slideOut动画把元素滑动出去才行。
-webkit-animation-fill-mode:both; 这个样式是为了动画完成后保留动画完成时的状态，如果不加这个样式的话动画完成后又会弹回原来状态了。
我的animation使用方法就介绍到这里了，各位大神有木有更好的实现方法或者建议，欢迎交流下呗~
使用CSS3动画 animation 来控制元素的显示和隐藏,布布扣,bubuko.com
使用CSS3动画 animation 来控制元素的显示和隐藏
原文地址：http://my.oschina.net/luozt/blog/294352
