你好，我正在嘗試動畫元素，以便它旋轉7次然後減慢並且簡化我已經完成了旋轉我只需要緩解它。我正在使用一個from和to關鍵幀來旋轉它，我是否需要逐幀完成或者有另一種方法？旋轉7次然後輕鬆
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.spin.animated {
animation-name: spin;
animation-duration: 400ms;
animation-iteration-count: 7;
animation-timing-function: linear;
}
你的意思是這樣的：
.spin {
width:100px;
height:100px;
background:red;
}
@-webkit-keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(2520deg);
}
}
.spin.animated {
-webkit-animation-name: spin;
-webkit-animation-duration: 2800ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
}<div class="spin animated"></div>甚至更好：
.spin {
width:100px;
height:100px;
background:red;
}
.spin:hover {
transform:rotate(2520deg);
transition: transform 3s ease-out;
}<div class="spin"></div>工作完美，謝謝！ – 2014-10-28 14:17:44
在to，給另一個動畫：
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
animation: ease;
}
}
@keyframes ease {
}
您可能需要解決迭代次數在這裏。它應該僅在7個動畫之後發生。所以，我不確定這一點。
你幾乎一直都在那裏。
.spin.animated {
animation-name: spin;
animation-duration: 400ms;
animation-iteration-count: 7;
animation-timing-function: ease; /* your timing function is where you tell it how to animate */
}
這裏是所有可用話費清單： http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp
你可以用三次貝塞爾定時功能做到這一點。
喜歡的東西
cubic-bezier(0.81, 0.95, 0.84, 0.95)
將使得像一個你正在尋找的效果。有大部分時間的線性動畫，然後它會減慢
你可以嘗試不同的值，並將其設置圖形，這裏
這類 '多動畫' 是最適合的JavaScript。最好的情況下，你可以應用2個動畫..一個旋轉6次，不容易，第二個旋轉1次，並且有一個適當的延遲，以便它在第一次結束之前不會啓動。看看爲什麼Js更容易？ – 2014-10-27 11:46:29
我試圖不使用JS – 2014-10-27 14:13:12
有時候，如果你想要這種效果，你就得到了。 – 2014-10-27 14:47:37