CSS動畫 - 如何讓這部動畫更流利？

-2

首先，我不打算使用Javascript。完全在HTML & CSS中完成。CSS動畫 - 如何讓這部動畫更流利？

我想重新創建this animation這是一個在AE中製作的gif，純粹是在CSS中。這正是我現在所擁有的，但是正如你所看到的那樣，它在中間變慢了，並且讓人感覺有一種奇怪的延遲，任何人都知道我能如何擺脫這種情況（這可能是因爲放置/使用@keframes不合適）？

.kader { 
 
    width: 85px; 
 
    height: 85px; 
 
    border-color: black; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    margin: 60px 30px; 
 
    position: absolute; 
 
    animation-delay: 0s; 
 
    animation-duration: 1.5s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease-in-out; 
 
    transform-origin: center; 
 
} 
 

 
.k1 { 
 
    animation-name: animation_k1; 
 
    transform: rotate(45deg); 
 
} 
 

 
.k2 { 
 
    animation-name: animation_k2; 
 
} 
 

 
.k3 { 
 
    animation-name: animation_k3; 
 
} 
 

 
.k4 { 
 
    animation-name: animation_k4; 
 
} 
 

 
.k5 { 
 
    animation-name: animation_k5; 
 
} 
 

 
@keyframes animation_k1 { 
 
    0% { 
 
     transform: rotate(45deg); 
 
    } 
 
    25% { 
 
     transform: rotate(90deg); 
 
    } 
 
    50% { 
 
     transform: rotate(45deg); 
 
    } 
 
    75% { 
 
     transform: rotate(0deg); 
 
    } 
 
    100% { 
 
     transform: rotate(45deg); 
 
    } 
 
}

<div id="animatie"> 
 
      <div class="kader k1"></div> 
 
      <div class="kader k2"></div> 
 
      <div class="kader k3"></div> 
 
      <div class="kader k4"></div> 
 
      <div class="kader k5"></div> 
 
     </div>

來源

2017-05-08 Panic

爲什麼這會陷入遺忘？ –

@JonasGiuro確切的原因是這樣的：「尋求調試幫助的問題（」爲什麼這個代碼不工作？「）必須包含所需的行爲，特定的問題或錯誤以及在問題本身中重現問題所需的最短代碼。沒有明確問題陳述的問題對其他讀者沒有用。請參閱：[如何創建最小，完整和可驗證的示例。]（http://stackoverflow.com/help/mcve）「。我不同意嘗試關閉。最小的例子就在那裏。它只需要從小提琴移動到一個堆棧片段。 –

我編輯的問題有堆棧片段。 –

你過於複雜的事情，你需要的是animation-direction: alternate;

.kader { 
 
    width: 85px; 
 
    height: 85px; 
 
    border-color: black; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    margin: 60px 30px; 
 
    position: absolute; 
 
    animation-delay: 0s; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease-in-out; 
 
    animation-direction: alternate; 
 
    transform-origin: center; 
 
} 
 

 
.k1 { 
 
    animation-name: animation_k1; 
 
    transform: rotate(45deg); 
 
} 
 

 
.k2 { 
 
    animation-name: animation_k2; 
 
} 
 

 
.k3 { 
 
    animation-name: animation_k3; 
 
} 
 

 
.k4 { 
 
    animation-name: animation_k4; 
 
} 
 

 
.k5 { 
 
    animation-name: animation_k5; 
 
} 
 

 
@keyframes animation_k1 { 
 
    0% { 
 
     transform: rotate(-45deg); 
 
    } 
 

 
    100% { 
 
     transform: rotate(45deg); 
 
    } 
 
}

<div id="animatie"> 
 
      <div class="kader k1"></div> 
 
      <div class="kader k2"></div> 
 
      <div class="kader k3"></div> 
 
      <div class="kader k4"></div> 
 
      <div class="kader k5"></div> 
 
     </div>

來源

2017-05-08 14:49:58

應該是這樣的：https：//jsfiddle.net/dalinhuang/qxfdxh46/1/ –

取決於，我把靜態平方當作參考，但是是的，我明白你的意思了。 –

非常感謝你！ – Panic

如果我corrrectly理解您的問題，這是你的：

animation-timing-function: ease-in-out;

這是導致問題。對於中間沒有小「停止」的動畫。嘗試使用線性替代：

animation-timing-function: linear;

您也可以嘗試創建自己的自定義貝塞爾曲線以獲得正確的時間。

正如指出的那樣，它似乎也似乎是你的動畫技巧過於複雜。嘗試使用：

animation-direction: alternate;

而不是動畫前進和後退。

來源

2017-05-09 12:25:50 NoteTheNote

CSS動畫 - 如何讓這部動畫更流利？

回答

相關問題