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

Posted 2020-07-10 Newbie_小白

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