如何在淡入和現有變換后進行另一個變換 animation？

Question

您好，我有一個具有淡入和轉換（翻譯）animation 的文本，所以在淡入和轉換 animation 之后，我想要一個像上下一樣的移動文本，在無限循環中不要太多，就像你在等待加載一樣東西

 .imgContaner { width: 100%; height: 86.6vh; background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/85/Sky-3.jpg"); background-size: cover; background-repeat: no-repeat; position: relative; overflow: hidden; }.imgContaner p { color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3em; text-align: center; text-shadow: -1px 0 #000000, 1px 0 #000000, 0 1px #000000, 0 -1px #000000; animation: 4s ease-in-out test; opacity: 1; } @keyframes test { from { transform: translate(-50%, 400%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }

 <div className={classes.imgContaner}> <p>Make Your Dreams Come True</p> </div>

塊引用

Answer 1

您可以使用 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 以兩種方式執行此操作。 第一種方式：在您的 @keyframes 定義中添加更多幀。 不要使用 from 和 to 屬性，而是使用百分比。 例如：

@keyframes test {
  0% {   
    transform: translate(-50% , 400%);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%);
    opacity: 1;  
  }
  75% {
    Do other stuff...
  }
  100% {
    Do other stuff...
  }
}

第二種方式：在另一個之后播放連鎖動畫。 通過將延遲添加到第二個 animation 等於第一個 animation 的持續時間。 喜歡：

animation: test 4s ease-in-out, otherAnim 2s ease-in-out 4s;

請注意，您不能這樣做：

animation: test 4s ease-in-out;
animation: otherAnim 2s ease-in-out 4s;

這樣第一個將被第二個覆蓋。 這不是你想要的。