動(dòng)畫

CSS過渡動(dòng)畫:

transition:width 3s ease,height 3s ease 1s,background-color 3s ease 2s; 寬先變,用時(shí)3s,高1s后變,顏色2s后變
圓角:
border-radius:1s ease 3s;
transition:all 3s ease;一起變
運(yùn)動(dòng)曲線:
div:nth-child(1) 第一個(gè)div
box-shadow:左右,垂直,陰影清楚與否,陰影大小
insert 內(nèi)陰影
transition:all 1s linear:勻速
transition:all ls ease; 中間快
transition:all 1s ease-in;越來快,突然停
transition:all 1s ease-out;越來慢,慢慢停
transition:all 1s ease-in-out;同ease
貝塞爾曲線:回彈
display:none;默認(rèn)隱藏
display:block;出現(xiàn)
變形:
transform:translate(30px,20px); 水平,垂直位移 不影響別的
旋轉(zhuǎn):
transform:rotate(30deg) 轉(zhuǎn)30度
transform:scale(0.5,3) 縮放
transform:skew(30deg,0) 水平斜切45度,垂直不變
transform-style:preserve-3d;
默認(rèn)Z軸旋轉(zhuǎn)
transform:perspective(800px) rotateX(45deg) X軸旋轉(zhuǎn)

變形中心點(diǎn):

transition-origin:left center; 沿著左邊中心點(diǎn)轉(zhuǎn)
transition-origin:left top; 左上角
transition-origin:50px 50px;
transition:all 1s ease;
transform:rotate(90deg);
背面可見:(默認(rèn))
transition:all 1s ease;
transform-style:preserve-3d;
transform:perspective(800px) rotateY(0deg);
transform-visibility:hidden; 背面不可見
transition:rotateY(180deg); 翻轉(zhuǎn)
position:relative; 相對定位 父類定義,相對body
position:absolute; 絕對定位 相對父類
text-align:center; 文字居中

animation動(dòng)畫:

animation:moving 1s ease 1s 5(infinite) alternate forwards; 一次1s,5次(不限次),原路返回 ,停后不跳回
animation-play-state:paused; 鼠標(biāo)移入暫停
running; 移入開動(dòng)
@keyframes moving{
from{
width:100px;
}
to{
width:50px;
}
}
border-radius:50px; 圓

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • css3有哪些新增的特性?1,css權(quán)重 2,新增選擇器 3,css3圓角,陰影,rgba(顏色表示法) ...
    爽爽ing閱讀 232評(píng)論 0 0
  • 過渡效果的設(shè)置transition: ease開始和結(jié)束慢速運(yùn)動(dòng)曲線linear 勻速ease 開始和結(jié)束慢設(shè)置圓...
    crx彭彭閱讀 208評(píng)論 0 0
  • 看了很多視頻、文章,最后卻通通忘記了,別人的知識(shí)依舊是別人的,自己卻什么都沒獲得。此系列文章旨在加深自己的印象,因...
    DCbryant閱讀 1,963評(píng)論 0 4
  • CSS過渡動(dòng)畫: transition:width 3s ease,height 3s ease 1s,backg...
    小胡123閱讀 407評(píng)論 0 0
  • 關(guān)鍵詞:圍觀 最后一面 再會(huì) 勞拉和佩斯是一對戀人。 勞拉有一個(gè)嗜賭如命的父親,為了還債,她鋌而走險(xiǎn)販毒,但第一...
    甜甜媽正面管教之路閱讀 215評(píng)論 0 0

友情鏈接更多精彩內(nèi)容