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

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

转载于:https://www.cnblogs.com/theWayToAce/p/5516625.html