为关键帧动画添加暂停

Question

我有这个脚本可以让 2 个角色分别 360 度移动。现在我必须在每次都转 180 度时添加 4 秒的停顿。我已经用百分比试过了，但效果不佳。字母旋转太快或太慢，或者停顿时间不够长。

有人能解决我的问题吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation</title>
   <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <style>
      .letter{
          height: 80px;
          z-index: 99;
          position: absolute;
          margin-top: 100px
      }
      
      .letter1{
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          animation-direction: alternate;
      }
      
      .letter2{
          margin-left: 700px;
      }
      
      .letter3{
          margin-left: 780px;
      } 
      .letter4{
          animation-duration: 2s;
          animation-iteration-count: infinite;
          animation-direction: alternate;
          animation-timing-function: linear;
      }
      .letter5{
          margin-left: 940px;
      }
      .letter6{
          margin-left: 1020px;
      }
      
      .C {
            position: absolute;
            margin-left: 730px;
            animation: rotC 3s infinite linear;
            z-index: 1;
            display: inline-block;
        }
      
      .P {
            position: absolute;
            margin-left: 730px;
            animation: rotP 3s infinite linear;
            z-index: 1;
            display: inline-block;
            /*animation-delay: move 3s infinite;*/
        }
      
      
      @keyframes rotC {
             from {
                transform: rotate(0deg)
                           translate(-130px)
                           rotate(0deg);
            }
            to {
                transform: rotate(360deg)
                           translate(-130px) 
                           rotate(-360deg);
            }
        }
      
      @keyframes rotP {
             from {
                transform: rotate(0deg)
                           translate(130px)
                           rotate(0deg);
            }
            to {
                transform: rotate(360deg)
                           translate(130px) 
                           rotate(-360deg);
            }
        }


      
    
    </style>
  
   <div class="vid"><!-- prycto-->
   <img src="geknletters/P.png" alt="p" class="P letter">
   <img src="geknletters/R.png" alt="r" class="letter2 letter">
   <img src="geknletters/y.png" alt="y" class="letter3 letter">
       <img src="geknletters/C.png" alt="c" class="C letter">
   <img src="geknletters/T.png" alt="t" class="letter5 letter">
   <img src="geknletters/o.png" alt="o" class="letter6 letter">
    <video src="051476630-astronaut-doing-ballet-dance-m_H264HD1080.mov" style="position: absolute;
    margin: 0;
    width: 100%;
    height: 100vh;
    top:0;
    left: 0;" >
    </video>
    </div>
</body>
</html>

亲切的问候，乔恩·巴克霍夫

Answer 1

You can't stop the animation when the animation started .

有animation-delay但是会延迟动画的开始，但是在开始之后它会连续运行。

解决方案是关键帧没有变化。

有关更多信息，请阅读此 link。

https://css-tricks.com/css-keyframe-animation-delay-iterations/

以及您问题的答案。

您要做的第一件事是将动画设置为 14 秒 因为你需要一个 4s stop 和 3s animate 。
3 秒动画 (180 度) + 4 秒停止 (180 度) + 3 秒动画 (360 度) + 4 秒停止 (360 度) = 14 秒

animation: rotP 14s infinite linear;
animation: rotC 14s infinite linear;

之后您将需要计算动画的百分比。

我们将需要使用百分比，因为我们将不做任何更改关键帧。

(3/14)*100 = 21.4% (3s) -- (4/14)*100 = 28.6%（4秒）

(21.4% = 3s) 动画和 (28.6% = 4s) 停止时间。对于14s的时间段。

然后初始化百分比

0% + 21.4% = 21.4% [总时间3s] -- since (21.4% = 3s) 动画
21.4% + 28.6% = 50% [总时间7s] -- 自(28.6% = 4s)停止时间
50% + 21.4% = 71.4% [总时间10s]
71.4% + 28.6% = 100% [总时间14s]

.letter{
          height: 80px;
          z-index: 99;
          position: absolute;
          margin-top: 100px
      }
      
      .letter1{
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          animation-direction: alternate;
      }
      
      .letter2{
          margin-left: 700px;
      }
      
      .letter3{
          margin-left: 780px;
      } 
      .letter4{
          animation-duration: 2s;
          animation-iteration-count: infinite;
          animation-direction: alternate;
          animation-timing-function: linear;
      }
      .letter5{
          margin-left: 940px;
      }
      .letter6{
          margin-left: 1020px;
      }
      
      .C {
            position: absolute;
            margin-left: 730px;
            animation: rotC 14s infinite linear;
            z-index: 1;
            display: inline-block;
        }
      
      .P {
            position: absolute;
            margin-left: 730px;
            animation: rotP 14s infinite linear;
            z-index: 1;
            display: inline-block;
            /*animation-delay: move 3s infinite;*/
        }
      
      
      @keyframes rotC {
             0% {
                transform: rotate(0deg)
                           translate(-130px)
                           rotate(0deg);
            }
        
            21.4% {
                transform: rotate(180deg)
                           translate(-130px)
                           rotate(-180deg);
            }
        
            50% {
                transform: rotate(180deg)
                           translate(-130px)
                           rotate(-180deg);
            }
            
            71.4% {
                transform: rotate(360deg)
                           translate(-130px)
                           rotate(-360deg);
            }
        
            100% {
                transform: rotate(360deg)
                           translate(-130px) 
                           rotate(-360deg);
            }
        }
      
      @keyframes rotP {
             0% {
                transform: rotate(0deg)
                           translate(130px)
                           rotate(0deg);
            }
        
            21.4% {
                transform: rotate(180deg)
                           translate(130px)
                           rotate(-180deg);
            }
        
            50% {
                transform: rotate(180deg)
                           translate(130px)
                           rotate(-180deg);
            }
        
        
            71.4% {
                transform: rotate(360deg)
                           translate(130px)
                           rotate(-360deg);
            }
        
            100% {
                transform: rotate(360deg)
                           translate(130px) 
                           rotate(-360deg);
            }
        }

 <div class="vid"><!-- prycto-->
   <img src="geknletters/P.png" alt="p" class="P letter">
   <img src="geknletters/R.png" alt="r" class="letter2 letter">
   <img src="geknletters/y.png" alt="y" class="letter3 letter">
       <img src="geknletters/C.png" alt="c" class="C letter">
   <img src="geknletters/T.png" alt="t" class="letter5 letter">
   <img src="geknletters/o.png" alt="o" class="letter6 letter">
    <video src="051476630-astronaut-doing-ballet-dance-m_H264HD1080.mov" style="position: absolute;
    margin: 0;
    width: 100%;
    height: 100vh;
    top:0;
    left: 0;" >
    </video>
    </div>

希望对您有所帮助

为关键帧动画添加暂停

Adding pause to keyframe animation

html

css

keyframe

pause

以及您问题的答案。