动画效果扔到你的style.css文件

@keyframes fade-in{0%{opacity:0;}
40%{opacity:0;}
100%{opacity:1;}} @-webkit-keyframes fade-in{0%{opacity:0;}
40%{opacity:0;}
100%{opacity:1;}}

丢到你要显示的容器名里面

#container{animation:fade-in;animation-duration:1s;-webkit-animation:fade-in 1s;}

浏览器支持

IE Firefox Chrome Safari Opera Internet Explorer 10、Firefox 以及 Opera 支持 animation-duration 属性。 Safari 和 Chrome 支持替代的 -webkit-animation-duration 属性。 注释：Internet Explorer 9 以及更早的版本不支持 animation-duration 属性。

定义和用法

animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。 默认值： 0 继承性： no 版本： CSS3 JavaScript 语法： object.style.animationDuration=“3s”

语法

animation-duration: time; 值 描述 time 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。