Question

您好，我有一个装有内容的容器。我的内容是带有动画的文本：

animation: move 15s linear infinite;

我的关键帧：

@keyframes move {
  0% {
    transform: translate(50px);
    opacity: 1;
  }
 
  50% {
    transform: translate(430px);
    opacity: 1;
    
  }
 
  100% {
    opacity: 1;
    transform: translate(50px);
  }
}

在容器的50％处，那是我希望它暂停一两秒然后眨眼，然后它可以按照我在这里给出的说明进行操作：

(100% {
        opacity: 1;
        transform: translate(50px);
      })

有人可以帮我吗？

谢谢

Answer 1

您可以在关键帧中使用多个步骤来创建闪烁效果。如果您希望元素在执行操作时保持原样，只需确保添加相同的位置（在本例中为<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <input id="date" type="text" placeholder="yyyy-dd-mm">。

这是您要找的吗？

transform: translate(430px);

.box {
  width: 50px;
  height: 50px;
  background-color: orangered;
  transform: translate(50px);
  animation: move 5s;
}

@keyframes move {
  0% {
    transform: translate(50px);
    opacity: 1;
  }
  50% {
    transform: translate(430px);
    opacity: 1;
  }
  
  52% { transform: translate(430px); opacity: 0; }
  54% { transform: translate(430px); opacity: 1; }
  56% { transform: translate(430px); opacity: 0; }
  58% { transform: translate(430px); opacity: 1; }
  60% { transform: translate(430px); opacity: 1; }
  
  100% {
    opacity: 1;
    transform: translate(50px);
  }
}

如何暂停动画并同时眨眼？

1 个答案: