-
2、動(dòng)畫屬性①transition是動(dòng)畫屬性，主要負(fù)責(zé)過渡屬性的變化②animation是動(dòng)畫屬性，他可以實(shí)現(xiàn)transition做不到的事情，animation可以直接加載動(dòng)畫，transition需要一個(gè)觸發(fā)，需要js協(xié)助③transform不是動(dòng)畫屬性，它是一個(gè)靜態(tài)類，經(jīng)常和動(dòng)畫類屬性搭配
查看全部 -
demo查看全部 -
說實(shí)話是實(shí)話實(shí)說設(shè)計(jì)和建設(shè)查看全部
-
transition?
????property
????duration
????過渡效果
2. display不能和transition一起使用
查看全部 -
①掌握transition和 animation?
② 模仿
③獨(dú)自開發(fā)
查看全部 -
css
????幀動(dòng)畫
????過度動(dòng)畫
動(dòng)畫屬性
????transition
????animation
查看全部 -
什么是動(dòng)畫
查看全部 -
學(xué)習(xí)CSS3意義
查看全部 -
文檔流，屬性變化的情況下查看全部
-
很好查看全部
-
動(dòng)畫監(jiān)聽事件：
查看全部 -
時(shí)間函數(shù)記錄
查看全部 -
1，第一階段:熟練的使用transition 和 animation 中的 name during
2，第二階段：模仿階段 模擬效果 觀察思路方案
3，第三階段：自己開發(fā)復(fù)雜的開發(fā)和實(shí)現(xiàn)
????????CSS3動(dòng)畫必備基礎(chǔ)
Css3新屬性和其他Css3靜態(tài)屬性
Chrime瀏覽器調(diào)試工具
掌握J(rèn)S的基本的API，例如屬性選擇、事件監(jiān)聽
查看全部 -
CSS3 動(dòng)畫包括Transiton 和 aniantion
動(dòng)畫常常和transform屬性常用
值得注意的是 transform并不是動(dòng)畫屬性，但是動(dòng)畫的實(shí)現(xiàn)離不開它
CSS3動(dòng)畫可以做一些功能性的菜單按鈕
宣傳的輪播圖，各種頁(yè)面的緩沖
頁(yè)面間的切換過渡，網(wǎng)頁(yè)小游戲
????????????????????????????? ? ? Swiper
????????????????????????????????? ? ? ?|
Vue-transition????—? ? CSS動(dòng)畫????—????Animate.css
????????????????????????????????? ? ? ?|
?????????????????????????????????????SVG
查看全部 -
transform并不是動(dòng)畫屬性，但是它在為我們動(dòng)畫實(shí)現(xiàn)做出了杰出的貢獻(xiàn)
查看全部 -
css3 動(dòng)畫 transition animation
動(dòng)畫常常和transform屬性常用
查看全部 -
謝謝老師。查看全部
-
2查看全部
-
過度和動(dòng)畫在js中監(jiān)聽
監(jiān)聽的事件：animationstart animationend transitioned animationiteration?
在360 safari和部分chrome下需要WebkitAnimationEnd,IE和firefox已經(jīng)做了兼容直接寫就可以
查看全部 -
animation
動(dòng)畫名稱（name）@keyframes
過渡時(shí)間(duration)
延遲時(shí)間(delay)
時(shí)間函數(shù)(timing-function)
位移盡量使用：transform:translateX(200px)x軸水平位移
animation和transition的區(qū)別：
animation可以定義播放次數(shù)（iteration-count）
播放方向(direction)即是否輪流播放和反向播放
停止播放的狀態(tài)(fill-mode) 是否暫停
infinite：無限播放 ? 可以直接寫數(shù)字表示播放次數(shù)
播放方向:alternate:先正后反?
? ? ? ? ? ? ? reverse:反向 從結(jié)束位置往開始位置播放
停止播放的狀態(tài)：forwards 停在最后一幀的位置
animation適用場(chǎng)景：跑馬燈 loading動(dòng)畫 幀動(dòng)畫
animation解決了transition display:none bug
查看全部 -
Transition:過渡動(dòng)畫 類似的一個(gè)：transform
四大屬性：
屬性名稱：property 1代碼順序
過渡時(shí)間:duration 2
延遲時(shí)間：delay 4
時(shí)間函數(shù)：timing-function 3
scss:&:hover{} 偽類選擇器：鼠標(biāo)滑過時(shí)的樣式 相當(dāng)于.demo-1:hover{}
.demo-1{
&:hover{
}
transition:width 2s linear (ease) 2s;
}
特性：當(dāng)文檔流的屬性有變化的時(shí)候才會(huì)實(shí)現(xiàn)過度，而且文檔流開始有一個(gè) 初始化
時(shí)間函數(shù)：實(shí)現(xiàn)一個(gè)緩動(dòng)的效果
注意點(diǎn)：display不能和transition一起使用
transition需要元素在文檔中有一個(gè)初始的屬性，瀏覽器讀不到display的任何屬性值
transition后邊盡量不要跟all 造成瀏覽器大量計(jì)算資源
常見閃動(dòng)：perspective和backface-visibility
查看全部
舉報(bào)