css从左到右缓慢展开关键帧

CSS从左到右缓慢展开关键帧，可以通过以下几个步骤实现。

首先，我们需要一个div元素来进行动画效果展示。在CSS中，我们可以这样写：

  <div class="animation"></div>
 
  .animation{
    position: relative;
    width: 0%;
    height: 20px;
    background-color: red;
  }
 

这个div元素有一个初始状态，它的width属性为0，也就是说它的宽度为0%。

接下来，我们需要定义一个关键帧动画：

  @keyframes expand {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }
 

这个关键帧动画的作用是将div元素的宽度从0%缓慢展开到100%。

最后，我们需要将动画效果应用到div元素上：

  .animation {
    animation-name: expand;
    animation-duration: 5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: 1s;
  }
 

这里我们使用了animation-name属性来指定关键帧动画名称，并通过animation-duration属性来设置动画的时间长短。

animation-timing-function属性用来调整动画运动的速度曲线，这里我们使用了ease-out曲线，表示动画先快后慢。

animation-fill-mode属性用于设置在动画执行结束后，元素应该如何保持最后一帧。在这里我们设置为forwards，表示元素会保持动画执行结束时的状态。

最后，通过animation-delay属性，我们可以设置动画延迟执行的时间，这里我们将其设置为1秒钟。