代码之家 › 专栏 › 技术社区 › Jorn Barkhof

向关键帧动画添加暂停

pause keyframe css html

Jorn Barkhof · 技术社区 · 8 年前

我有一个脚本,让两个角色在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>

谨致问候, 乔恩·巴克霍夫

1 回复 | 直到 8 年前

davecar21 8 年前

动画开始时不能停止动画。

有 animation-delay 但这会延迟动画的开始,但动画开始后会持续运行。

解决方案将是没有更改的关键帧。

还有你问题的答案。

第一件事 你要做的就是 动画为14s 因为你需要一个4s站和3s动画。
3s动画(180度)+4s停止(180度)+3s动画(360度)+4s停止(360度)=14s

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

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

我们需要使用百分比,因为我们将执行 无更改的关键帧 .

(3/14)*100 = 21.4% (对于3s)--(4/14)*100= 28.6% (对于4s)

(21.4%=3s)动画和(28.6%=4s)停止时间。14秒期间。

然后 初始化百分比

0% + 21.4% = 21.4% [总时间3s]-- 自(21.4%=3s)动画
21.4% + 28.6% = 50% [总时间7s]-- 自(28.6%=4s)停止时间
50% + 21.4% = 71.4% [总时间10秒]
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>

希望这有帮助