CSS3动画 (一) - Animation

　CSS3 Animation 实现各种效果

CSS3 Animation 实现对象从右到左渐变的css3动画效果：

CSS：
@-webkit-keyframes fadeInRight {
	0% {opacity: 0;-webkit-transform: translateX(20px);}	
	100% {opacity: 1;-webkit-transform: translateX(0);}
}
@keyframes fadeInRight {
	0% {opacity: 0;transform: translateX(20px);}	
	100% {opacity: 1;transform: translateX(0);}
} 

/*调用animation属性，从而让按钮在载入页面时就具有动画效果 以-webkit为例，请为不同的浏览器添加前缀 */

nav ul li:nth-child(1){ 
    -webkit-animation-name: "fadeInRight"; /*动画名称，需要跟@keyframes定义的名称一致*/
    -webkit-animation-duration: 2s;/*动画持续的时间长*/
    -webkit-animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
} 
nav ul li:nth-child(2){ -webkit-animation:'fadeInRight' 3s 1} /* 简写 */
nav ul li:nth-child(3){ -webkit-animation:'fadeInRight' 4s 1}
nav ul li:nth-child(4){ -webkit-animation:'fadeInRight' 5s 1}
nav ul li:nth-child(5){ -webkit-animation:'fadeInRight' 6s 1}
nav ul li:nth-child(6){ -webkit-animation:'fadeInRight' 7s 1}

　　

HTML：
<nav>
    <ul>
       <li><a href="#" target="_blank">个人网站模板</a></li>
       <li><a href="#" target="_blank">企业网站模板</a></li>
       <li><a href="#" target="_blank">网站建设</a></li>
       <li><a href="#" target="_blank">HTML5案例</a></li>
       <li><a href="#" target="_blank">技术探讨</a></li>
       <li><a href="#" target="_blank">作品展示</a></li>
    </ul>      
</nav>

 

CSS3 Animation 实现对象从右到左时间轴动画效果：

CSS：
body { font: 14px "微软雅黑", Arial, Helvetica, sans-serif; background: #075498; color: #fff }
ul, li { list-style: none; }
.memorial { overflow: hidden; position: relative; padding: 60px; }
.time_axis { background: #e9f5fb; height: 6px; width: 100%; animation: time_a 5s; -moz-animation: time_a 5s; /* Firefox */ -webkit-animation: time_a 5s; /* Safari and Chrome */ -o-animation: time_a 5s; /* Opera */ }
/*时间轴动画效果*/
@keyframes time_a { 
	0% {width:0px;}
	25% {width:250px;}
	50% {width:500px;}
	100% {width:840px;}
}
 @-moz-keyframes time_a /* Firefox */ { 
	0% {width:0px;}
	25% {width:250px;}
	50% {width:500px;}
	100% {width:840px;}
}
 @-webkit-keyframes time_a /* Safari and Chrome */ { 
	0% {width:0px;}
	25% {width:250px;}
	50% {width:500px;}
	100% {width:840px;}
}
 @-o-keyframes time_a /* Opera */ { 
	0% {width:0px;}
	25% {width:250px;}
	50% {width:500px;}
	100% {width:840px;}
}
.dateview { position: absolute; top: -50px; left: 20px; display: block; width: 88px; background: url(dtime.png) no-repeat; color: #FFF; height: 46px; line-height: 30px; text-align: center }
.memorial ul li a { margin-top: 30px; display: block; color: #fff }
.memorial ul li a:hover { text-decoration: underline }
.memorial ul li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; position: absolute; background: #0979b1; border: 3px solid #e9f6fb; }
.memorial ul li:hover::before { background: #075498; border: 3px solid #e9f6fb; }
.memorial ul li.n1 {position: absolute;top: 54px;left: 90px;}
.memorial ul li.n2 { position: absolute; top: 54px; left: 220px }
.memorial ul li.n3 { position: absolute; top: 54px; left: 390px }
.memorial ul li.n4 { position: absolute; top: 54px; left: 580px }
.memorial ul li.n5 { position: absolute; top: 54px; left: 790px }

　　

HTML：
<div class="memorial">
	<div class="time_axis"></div>
	<ul>
		<li class="n1"><a href="/">时间段111</a>
			<div class="dateview">2001</div>
		</li>
	  	<li class="n2"><a href="/">时间段222</a>
	    	<div class="dateview">2011-01-12</div>
	  	</li>
	  	<li class="n3"><a href="#">时间段333</a>
	    	<div class="dateview">2013-06-08</div>
	  	</li>
	  	<li class="n4"><a href="#">2016</a>
	    	<div class="dateview">2014-02-19</div>
	  	</li>
	  	<li class="n5"><a href="#">2017</a>
	    	<div class="dateview">2017-09-08</div>
	  	</li>
	</ul>
</div>