body{
    overflow-x: hidden;  /*此处需要设置溢出隐藏，否则文字起始位移超过页面大小就会在页面下方出现横的滚动条*/
}

/*向左的框架*/
.sh1 {
	height:auto;
}
.sh1 .t1 {
	opacity:0;/*初始透明度为0*/
	animation:left 3s forwards; /*动画运行时间3s*/
	animation-play-state:paused; /*动画暂停*/
}
.sh1 .left {
	animation-play-state:running; /*动画运行*/
}

/*向右的框架*/
.sh2 {
	height:auto;
}
.sh2 .t2 {
	opacity:0;/*初始透明度为0*/
	animation:right 1s forwards; /*动画运行时间3s*/
	animation-play-state:paused; /*动画暂停*/
}
.sh2 .right {
	animation-play-state:running; /*动画运行*/
}

/*向上的框架*/
.sh3 {
	height:auto;
}
.sh3 .t3 {
	opacity:0;/*初始透明度为0*/
	animation:up 1s forwards; /*动画运行时间3s*/
	animation-play-state:paused; /*动画暂停*/
}
.sh3 .up {
	animation-play-state:running; /*动画运行*/
}

/*向下的框架*/
.sh4 {
	height:auto;
}
.sh4 .t4 {
	opacity:0;/*初始透明度为0*/
	animation:down 3s forwards; /*动画运行时间3s*/
	animation-play-state:paused; /*动画暂停*/
}
.sh4 .down {
	animation-play-state:running; /*动画运行*/
}




/*定义一个名字为left动画，实现从页面的左边淡入页面效果*/
@keyframes left{
    0%{ transform: translateX(-200px); opacity: 0;}   /*在0%时设置文字在想X轴-200px位移处（左边），透明度为0，也就是看不见文字*/
    100%{ transform: translateX(0px); opacity: 1;}         /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
@-webkit-keyframes left{
    0%{ -webkit-transform: translateX(-200px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}    
}
@-o-keyframes left{
    0%{ -webkit-transform: translateX(-200px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}    
}
@-ms-keyframes left{
    0%{ -webkit-transform: translateX(-200px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}    
}
@-moz-keyframes left{
    0%{ -webkit-transform: translateX(-200px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}    
}

.left{
    animation: left 3s ease 1;    /*调用已定义好的动画left，全程运行时间3S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: left 3s ease 1;
    -ms-animation: left 3s ease 1;
    -o-animation: left 3s ease 1;
    -moz-animation: left 3s ease 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}

/*定义一个名字为right动画，实现从页面的右边淡入页面效果*/
@keyframes right{
    0%{ transform: translateX(0px); opacity: 0; transform: scale(0);}   /*在0%时设置文字在想X轴5px位移处（右边），透明度为0，也就是看不见文字*/
    100%{ transform: translateX(0px); opacity: 1; transform: scale(1);}      /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
@-webkit-keyframes right{
    0%{ -webkit-transform: translateX(0px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-o-keyframes right{
    0%{ -webkit-transform: translateX(0px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-ms-keyframes right{
    0%{ -webkit-transform: translateX(0px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-moz-keyframes right{
    0%{ -webkit-transform: translateX(0px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}

.right{
    animation: right 3s ease 1;    /*调用已定义好的动画right，全程运行时间3S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: right 3s ease 1;
    -moz-animation: right 3s ease 1;
    -ms-animation: right 3s ease 1;
    -o-animation: right 3s ease 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}

/*定义一个名字为up动画，实现从页面的向上淡入页面效果*/
@keyframes up{
    0%{ transform: translateY(200px); opacity: 0;}   /*在0%时设置文字在想Y轴200px位移处（上方），透明度为0，也就是看不见文字*/
    100%{ transform: translateY(0px); opacity: 1;}      /*在100%时设置文字在想Y轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
@-webkit-keyframes up{
    0%{ -webkit-transform: translateY(200px); opacity: 0;}
    100%{ -webkit-transform: translateY(0px); opacity: 1;}
}
@-o-keyframes up{
    0%{ -webkit-transform: translateY(200px); opacity: 0;}
    100%{ -webkit-transform: translateY(0px); opacity: 1;}
}
@-ms-keyframes up{
    0%{ -webkit-transform: translateY(200px); opacity: 0;}
    100%{ -webkit-transform: translateY(0px); opacity: 1;}
}
@-moz-keyframes up{
    0%{ -webkit-transform: translateY(200px); opacity: 0;}
    100%{ -webkit-transform: translateY(0px); opacity: 1;}
}

.up{
    animation: up 3s ease 1;    /*调用已定义好的动画up，全程运行时间3S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: up 3s ease 1;
    -moz-animation: up 3s ease 1;
    -ms-animation: up 3s ease 1;
    -o-animation: up 3s ease 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards;
}

/*定义一个名字为down动画，实现从页面的向下淡入页面效果*/
@keyframes down{
    0%{ transform: translateY(-200px); opacity: 0;}   /*在0%时设置文字在想Y轴-200px位移处（下方），透明度为0，也就是看不见文字*/
    100%{ transform: translateY(0px); opacity: 1;}         /*在100%时设置文字在想Y轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
@-webkit-keyframes down{
    0%{ -webkit-transform: translateY(-200px); opacity: 0;}
    100%{ -webkit-transform: translateY(0px); opacity: 1;}    
}
@-o-keyframes down{
    0%{ -webkit-transform: translateY(-200px); opacity: 0;}
    100%{ -webkit-transform: translateY(0px); opacity: 1;}    
}
@-ms-keyframes down{
    0%{ -webkit-transform: translateY(-200px); opacity: 0;}
    100%{ -webkit-transform: translateY(0px); opacity: 1;}    
}
@-moz-keyframes down{
    0%{ -webkit-transform: translateY(-200px); opacity: 0;}
    100%{ -webkit-transform: translateY(0px); opacity: 1;}    
}

.down{
    animation: down 3s ease 1;    /*调用已定义好的动画down，全程运行时间3S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: down 3s ease 1;
    -ms-animation: down 3s ease 1;
    -o-animation: down 3s ease 1;
    -moz-animation: down 3s ease 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}