css动画从左向右渐变滑动效果

 

 第一步，先布局

        

        
创新发展、追求卓越的
        
核心文化理念

第二步，设置诗句的基本属性，字体大小，文字间隔，以及初始位置transform: translate(0) 

p {
        font-size: 45px;
        font-weight: 700;
        margin-bottom: 25px;
        transform: translate(0);
      }

第三步，添加css3动画animation 

animation: example1 1s ease-out 0s backwards; 

.develop-one-main {
      width: 1200px;
      position: absolute;
      top: 30%;
      left: 18%;
      animation: example1 1s ease-out 0s backwards;
}

第四步，使用@keyframes规则，创建动画

创建动画是通过逐步改变从一个CSS样式设定到另一个。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成

@keyframes example1 {
  0% {
    transform: translate(-100px);
    opacity: 0;
  }

  50% {
    transform: translate();
    opacity: 0.5;
  }

  100% {
    transform: translate(0);
    // opacity: 1;
  }
}