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

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