我有一個冰山的標志，我試圖通過增加和減少頂部邊距來模擬浮動動畫。我為此使用以下 css：img { height: 60px; padding: 5px; -webkit-animation: logofloat 1s ease-in-out infinite alternate; -moz-animation: logofloat 1s ease-in-out infinite alternate; animation: logofloat 1s ease-in-out infinite alternate;}@keyframes logofloat {from { margin-top: 0px; margin-top: 5px;}to { margin-top: 5px; margin-top: 10px;}}這是目前的樣子：https://gyazo.com/bbd8991a3e9a42148bb7677b85d0db3d動畫有點斷斷續續，有什么辦法可以讓它更流暢嗎？
1 回答
小唯快跑啊
TA貢獻1863條經驗 獲得超2個贊
使用transform: translateY而不是margin，因此動畫將利用 并GPU使用will-change: transform，以便瀏覽器?提前知道哪些屬性將要更改。
img {
? height: 100px;
? will-change: transform;
? animation: logofloat 1s ease-in-out infinite alternate;
}
@keyframes logofloat {
? ?from {
? ? ? ?transform: translateY(0);
? ?}
? ?to {
? ? ? ?transform: translateY(10px);
? ?}
}
<img src="https://i.stack.imgur.com/UJ3pb.jpg" />
最后，除非您需要支持非常舊的瀏覽器版本，否則不再需要供應商前綴。
- 1 回答
- 0 關注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消