過渡與動畫

簡單動畫—過渡（transition）

簡單動畫通常稱之為過渡（transition）

一定時間內，從一個值變化到另一個值

transition-property過渡的屬性（all表示所有可過渡屬性）

注：需要過渡的屬性必須給固定值，即不能給auto

transition-duration過渡的時間

transition-duration: 30ms;transition-property: width height;

transition-timing-function過渡速度

transition-timing-function: ease;默認值，先慢后快再變慢 transition-timing-function: linear;勻速 transition-timing-function: ease-in;慢速開始 慢速結束 transition-timing-function: ease-out;快速開始 慢速結束 transition-timing-function: ease-in-out;慢速開始結束，中間先快后慢

簡寫：

transition: all linear 2s;

可以過渡的屬性：顏色、尺寸、透明度

因此讓一個標簽的展示效果從無到有，一般是設置透明度，效果發生后再給顏色

復雜動畫

1.定義（創建）動畫：

書寫格式：@keyframes 自定義動畫名{動畫效果}

動畫效果：百分率{聲明塊}

注：百分率是聲明塊（即：單獨的每一次）動畫的時間

如果起始效果和結束效果一致，可省略結束效果的代碼

@keyframes aliang {0% {left: 50px;color: darkviolet;border-radius: 50%;}50% {left: 150px;top: 150px;color: floralwhite;border-radius: 0px;}90% {left: 250px;top: 250px;color: floralwhite;border-radius: 0px;} }

2.引用動畫：

animation:動畫名 動畫用時 播放次數;

animation: aliang 5s infinite;

使用外部animate文件的動畫

需要在class中先添加antimated

再添加動畫名稱（HTML需提前引用css文件）

3.延時效果

transition-delay:在規定時間以后展示動畫效果

transition-delay: 500ms;

簡單動畫與復雜動畫的區別在于：

前者是從狀態1變化到狀態2，即:只能實現一次變化效果。
而后者是從狀態1變化到狀態N，可以實現多次變化效果

總結

以上是生活随笔為你收集整理的简单动画（过渡）与复杂动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。