从页面左边飞入页面动画效果

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


/*定义一个名字为lefteaseinAnimate动画，实现从页面的左边淡入页面效果*/

@keyframes lefteaseinAnimate {
 0% {
 transform: translateX(-2000px);
 opacity: 0;
 }
 /*在0%时设置文字在想X轴-2000px位移处（左边），透明度为0，也就是看不见文字*/
 100% {
 transform: translateX(0px);
 opacity: 1;
 }
 /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}

@-webkit-keyframes lefteaseinAnimate {
 0% {
 -webkit-transform: translateX(-2000px);
 opacity: 0;
 }
 100% {
 -webkit-transform: translateX(0px);
 opacity: 1;
 }
}

@-o-keyframes lefteaseinAnimate {
 0% {
 -webkit-transform: translateX(-2000px);
 opacity: 0;
 }
 100% {
 -webkit-transform: translateX(0px);
 opacity: 1;
 }
}

@-ms-keyframes lefteaseinAnimate {
 0% {
 -webkit-transform: translateX(-2000px);
 opacity: 0;
 }
 100% {
 -webkit-transform: translateX(0px);
 opacity: 1;
 }
}

@-moz-keyframes lefteaseinAnimate {
 0% {
 -webkit-transform: translateX(-2000px);
 opacity: 0;
 }
 100% {
 -webkit-transform: translateX(0px);
 opacity: 1;
 }
}

.word {
 animation: lefteaseinAnimate 1s ease 1;
 /*调用已定义好的动画lefteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
 -webkit-animation: lefteaseinAnimate 1s ease 1;
 -ms-animation: lefteaseinAnimate 1s ease 1;
 -o-animation: lefteaseinAnimate 1s ease 1;
 -moz-animation: lefteaseinAnimate 1s 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;
}