一、對transition屬性的認識

1、transition?屬性是一個簡寫屬性，可用于設置四個過渡屬性：

transition-property? ? ?過渡效果的?CSS?屬性的名稱(height、width、opacity等)。

transition-duration? ?完成過渡效果需要時間。

transition-timing-function?????規定速度效果的速度曲線。

transition-delay? ? ? ? ? 過渡效果何時開始(延遲時間)。

注：如果 transition-duration屬性時長為?0，就不會產生過渡效果。

2、漸變函數的值：

漸變函數是transition-timing-function；

其中貝塞爾曲線的預設值

ease漸快，勻速，減慢cubic-bezier(0.25,0.1,0.25,1)

ease-in漸快，勻速cubic-bezier(0.42,0,1,1)

ease-out勻速，減慢cubic-bezier(0,0,0.58,1)

ease-in-out和ease類似，但比ease的加速度大(幅度大)cubic-bezier(0.42,0,0.58,1)

linear全程勻速cubic-bezier(0,0,1,1)

3、簡寫方式：transition：css屬性名? 過度時間? 漸變函數值? 延遲時間；

二、簡單動畫實例操作

1、先插入兩張圖片

2、給圖片設置樣式

margin: auto 100px;

height: 400px;

width: 600px;

position: relative;

}

.A img:nth-child(1) {

height: 300px;

width: 300px;

position: absolute;

}

.A img:nth-child(2) {

height: 300px;

width: 300px;

position: absolute;

transition: opacity 3s ease-in2s;

}

.A img:nth-child(2):hover {

opacity:0;

}

img {

height: 300px;

width: 300px;

}

3、得到的動畫效果是：

內容來源于網絡如有侵權請私信刪除

總結

以上是生活随笔為你收集整理的css 右上角 翻开动画_css简单动画（transition属性）的全部內容，希望文章能夠幫你解決所遇到的問題。

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