简单的css3全屏滚动-左右方向

阅读更多

据说 translateZ(0)可以触发GPU渲染，提高动画的性能。

切换的属性变化，可以有2种：
1. transform:translateX的值
2. left的值；

这里动画切换比较简单，看不出有什么优势。

二、采用translateX属性值控制容器位置：

	
	
	  
	
	
	
	
	



	

		

			
 
				
只是前面的一段文字
				向左
				向右
			
			s1
			向左
			向右
		
	
	

		

			
我是S2 
			s2向左
			向右
		
	
	

		

			s3向左
			向右
		
	
	

		

			s4向左
			向右
		
	

二、采用left属性值控制容器位置：

section{top:0;left:100%;opacity:0;}
section.active{left:0;z-index:2;opacity:1; /*transition:all 1s;*/}
		
section.slideLeftPre{
			-webkit-animation: slideLeftPre 1s 1;
		}
		@-webkit-keyframes slideLeftPre{
			0%{left:0;opacity:1}
			99%{left:-99%;opacity:1}
			100%{left:-100%;opacity:0}
		}
		
		section.slideLeftNext{
			-webkit-animation: slideLeftNext 1s 1;
		}
		@-webkit-keyframes slideLeftNext{
			0%{left:100%;opacity:1;z-index:2;}
			100%{left:0;opacity:1;z-index:2;}
		}
		
		section.slideRightPre{
			-webkit-animation: slideRightPre 1s 1;
		}
		@-webkit-keyframes slideRightPre{
			0%{left:0;opacity:1}
			99%{left:99%;opacity:1}
			100%{left:100%;opacity:0}
		}
		
		section.slideRightNext{
			-webkit-animation: slideRightNext 1s 1;
		}
		@-webkit-keyframes slideRightNext{
			0%{left:-100%;opacity:1;z-index:2;}
			100%{left:0;opacity:1;z-index:2;}
		}