transition怎么實現過渡動畫

本篇內容主要講解“transition怎么實現過渡動畫”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“transition怎么實現過渡動畫”吧!

　　transition屬性：

　　transition-property:需要參與過渡的屬性，例如：width、height、background…

　　transition-duration:過渡動畫的持續時間，單位秒s或毫秒ms

　　transition-delay：延遲過渡的時間，單位秒s或毫秒ms

　　transition-timing-function：動畫過渡的動畫類型

　　我可以以屬性的形式被定義

　　div{

　　width:100px;

　　height:100px;

　　background:blue;

　　transition-property: width;/* 需要參與過渡的屬性 */

　　transition-duration: 1s;/* 過渡動畫的持續時間 */

　　transition-delay: 1s;/* 延遲過渡的時間，單位秒s或毫秒ms */

　　transition-timing-function: ease-out;/* 動畫過渡的動畫類型 */

　　}

　　div:hover{

　　width:300px;

　　}

　　效果圖

　　效果出來了我是不是很厲害？可是上面的我由于屬性太多有點不招新手同學待見 o（╥﹏╥）o

　　其實平時的我是下面這種形式出現在代碼中的：

　　這樣瘦身的我是不是就很可愛了呢？ （?▽?）

　　下面這樣寫，效果一樣喲

　　div{

　　width:100px;

　　height:100px;

　　background:blue;

　　transition:width 1s 1s ease-out ;

　　}

　　div:hover{

　　width:300px;

　　}

　　我還可以更厲害呢！ ?（?•??•??）?

　　通常情況下，我會讓一些元素在變化時產生動畫效果，但是我得和好搭檔hover（鼠標懸停）一起干活，先來看一段代碼：

　　div{

　　width:100px;

　　height:500px;

　　background:teal;

　　/* 而且我還能多個屬性逐個顯示過渡動畫效果哦——*/

　　transition:width .5s linear,height .5s ease .5s,background 1s ease-in 1s;

　　}

　　/* 鼠標懸停，改變div的樣式 */

　　div:hover{

　　width:500px;

　　height:100px;

　　background:hotpink;

　　}

　　！[]（https://cache.yisu.com/upload/information/20220117/488/18101.jpg）

　　那大家明白這種寫法嗎？試一試？

　　這里就是應用過渡動畫實現的效果，多個屬性是依次執行動畫效果的，其實就是巧妙應用了過渡延遲屬性，讓上一個屬性執行完了再接著下面一個，是不是很有趣鴨。

　　看我的絕技 transition-timing-function

　　transition-timing-function是動畫運動的曲線，它一共有6個值。

　　ease - 指定一個緩慢開始，然后快速，然后慢慢結束的過渡效果（這是默認值）

　　linear - 指定從開始到結束以相同速度的轉換效果

　　ease-in - 指定緩慢啟動的過渡效果

　　ease-out - 指定一個緩慢結束的過渡效果

　　ease-in-out - 指定開始和結束緩慢的過渡效果

　　cubic-bezier（n,n,n,n） - 在一個三次貝塞爾函數中定義您自己的值

　　#div1 {transition-timing-function: linear;}

　　#div2 {transition-timing-function: ease;}

　　#div3 {transition-timing-function: ease-in;}

　　#div4 {transition-timing-function: ease-out;}

　　#div5 {transition-timing-function: ease-in-out;}

　　看看我都能干什么吧！ヾ（?°∇°?）?? 復雜一點的例子

　　下面我們再來做一個更好看的效果，類似于彈鋼琴的效果，代碼如下：

　　html:

　　<ul>

　　<li><a href="">首頁</a><span></span></li>

　　<li><a href="">首頁</a><span></span></li>

　　<li><a href="">首頁</a><span></span></li>

　　<li><a href="">首頁</a><span></span></li>

　　</ul>

　　css

　　<style>

　　ul {

　　list-style: none;

　　width: 600px;

　　height: 60px;

　　background: skyblue;

　　}

　　li {

　　float: left;

　　/* 參照物 */

　　position: relative;

　　}

　　a {

　　display: block;

　　width: 150px;

　　height: 60px;

　　line-height: 60px;

　　text-align: center;

　　color: #333;

　　text-decoration: none;

　　/* 提升層級，解決被span遮住 */

　　position: relative;

　　z-index: 1;

　　}

　　span {

　　position: absolute;

　　bottom: 0;

　　width: 150px;

　　height: 4px;

　　background: pink;

　　/* 過渡 */

　　transition: height .5s linear;

　　}

　　li:hover span {

　　height: 60px;

　　}

　　</style>

到此，相信大家對“transition怎么實現過渡動畫”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！