保持動畫的連續性

我想用css創建一個動畫這個想法是，當徘徊導彈掉下來（檢查小提琴鏈接在底部）旋轉，使它幾乎垂直保持問題是沒有連續性在動畫中有幾個暫停，我認爲我的問題是在這裏保持動畫的連續性

.boy:hover~ .missile{ 
-webkit-animation:anim2 10s; 
} 

@-webkit-keyframes anim2{ 
0%{margin-left:280px;} 
50%{margin-left:100px;} 
60%{margin-top:90px;transform:rotate(200deg);} 
85%{margin-left:80px; } 
100%{margin-left:70px; margin-top:200px; transform:rotate(90deg);} 

}

http://jsfiddle.net/tuuqhgk3/2/

來源

2014-09-20 Akshay

.boy:hover~ .missile{ 
    -webkit-animation:anim2 10s; 
    -webkit-animation-timing-function: linear; 
}

這應該給你一個連續的動畫速度，而不是寬鬆（暫停）是默認設置。編號：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

來源

2014-09-20 16:09:13 kretzm

謝謝你，你真的幫我 – Akshay 2014-09-20 16:12:27

爲了順利的弧旋轉，我認爲你想要的，檢查這個鏈接：http://stackoverflow.com/questions/25950360/only-certain-elements-responding-to-media-queries 他們圍繞一個原點旋轉，這可能更容易做到（看起來更自然），然後試圖將導彈左移+下移並旋轉 – kretzm 2014-09-20 16:16:54

嘗試更新anim2這樣：

@-webkit-keyframes anim2 { 
    0% {margin-left: 280px; transform: rotate(220deg);} 
    15% {margin-top: 80px;} 
    100% {margin-left: 100px; margin-top: 200px; transform: rotate(130deg);} 
}

爲了獲得流暢的動畫效果，你需要計算需要在每一個改變精確的距離（邊距，保證金左）％步。我認爲你不需要在這種情況下添加太多的步驟。另外，如果你想重複動畫，你可以添加「-webkit-animation-iteration-count：infinite;」。到你的懸停.fire/.missile（例如，火併不會消失）。

來源

2014-09-20 16:12:52 quietbits

謝謝我不想讓'火'保持這種方式，我只是需要它保持幾秒鐘即可 – Akshay 2014-09-20 16:15:13

保持動畫的連續性

回答

相關問題