css的動畫屬性有哪些

2021-10-03 08:50:30 字數 1634 閱讀 2956

首先我們要**css3中的動畫屬性:

首先我們區分好transition 和 animation的區別

transition需要事件進行觸發

而animation 不需要事件觸發,呼叫關鍵幀即可。

如何建立乙個動畫:

首先我們在css樣式中先制定關鍵幀:

解析:首先form是開始狀態,

to到結束狀態

之後我們在需要進行動畫的元素裡新增好屬性aimation:即可

在這裡我們先解釋下animation屬性,後續再舉例進行分析

animation: 復合屬性

animation-name   關鍵幀名稱

animation-duration 動畫持續時間

animation-timing-function 動畫運動的型別 (勻速linear)

animation-delay 動畫延遲的時間

animation-iteration-count 動畫運動的次數 infinite(無限迴圈)

animation-direction 運動的方向

屬性值:

normal:正常方向

reverse:反方向執行

alternate:動畫先正常執行再反方向執行,並持續交替執行

alternate-reverse:動畫先反執行再正方向執行,並持續交

替執行animation-play-state

屬性值:

running:運動

paused: 暫停

常用的寫法:

animation:關鍵幀的名稱 動畫運動的時間 linear(勻速)

在這裡我們進行舉例分析:

例子1:如何建立乙個立方體動畫:

//這裡我們建立父元素,給父元素乙個寬高

//後續我們給父元素新增乙個固定定位 讓父元素處於居中位置

//讓父元素形成3d空間

//讓元素沿x,y軸進行轉動 以便於觀察

//新增關鍵幀到父元素中,設定好4s動畫時間 以及infinite 無限迴圈 normal正常方向

}

.box div{

width: 300px;

height: 300px;

position: fixed;

opacity: 0.5;

border: 2px black solid;

//給父元素中的子元素div新增好對應的寬高屬性以及定位

還有opacity半透明 以及邊框

//給子元素cont1新增背景顏色 還有讓子元素沿著z軸移動150px

以下對於其他cont1~6不作出其他解釋

//制定關鍵幀 讓元素轉動360度

以上即為動畫屬性的解釋,後續有補充

css3中動畫屬性有哪些?

什麼是2d?二維的平面空間 3d的動畫屬性和2d相識,就是比2d多了個軸 z軸 屬性有哪些呢?animation name 關鍵幀的名稱 animation duration 動畫的持續的時間 animation timing function 動畫運用的型別 勻速linear 加速度 減速度 貝塞...

css盒模型有哪些屬性

css盒模型是定義元素周圍的間隔 尺寸 外邊距 邊框以及文字內容和邊框之間內邊距的一組屬性的集合。示例 效果圖 由此可見 外邊距margin是不可見的,如果設定了父元素的背景,就可以看到 背景色在邊框區域設定乙個不同的背景,就可以看到內邊距 padding 區域。並且盒模型是由margin 外邊界 ...

css有哪些屬性可以繼承

1 字型系列屬性 font 組合字型 font family 規定元素的字型系列 font weight 設定字型的粗細 font size 設定字型的尺寸 font style 定義字型的風格 font variant 設定小型大寫字母的字型顯示文字,這意味著所有的小寫字母均會被轉換為 大寫,但是...