從頁面左邊飛入頁面動畫效果

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;
}