第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

讓 HTML/CSS 中的動(dòng)畫更加流暢

讓 HTML/CSS 中的動(dòng)畫更加流暢

飲歌長(zhǎng)嘯 2023-11-13 11:04:40
我有一個(gè)冰山的標(biāo)志,我試圖通過增加和減少頂部邊距來模擬浮動(dòng)動(dòng)畫。我為此使用以下 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動(dòng)畫有點(diǎn)斷斷續(xù)續(xù),有什么辦法可以讓它更流暢嗎?
查看完整描述

1 回答

?
小唯快跑啊

TA貢獻(xiàn)1863條經(jīng)驗(yàn) 獲得超2個(gè)贊

使用transform: translateY而不是margin,因此動(dòng)畫將利用 并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" />


最后,除非您需要支持非常舊的瀏覽器版本,否則不再需要供應(yīng)商前綴。



查看完整回答
反對(duì) 回復(fù) 2023-11-13
  • 1 回答
  • 0 關(guān)注
  • 133 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)