利用CSS3中的transform功能和transition功能實現簡單的hover時旋轉放大，撤銷hover漸變還原的動畫效果

transform

利用transform可以實現文字、影象的旋轉、縮放、傾斜、移動這4中型別的變形效果。

旋轉：

transform：rotate（30deg）;

縮放：

transform：scale（0.4）;

傾斜：

transform：skew(30deg);
transform:skew(120deg,45deg);

移動：

transform：translate(50px,12px)

transition

可以將一個屬性得值平滑的過渡到另一個值

使用方法：transition：property duration timing-function。也可以拆開單獨寫

property表示對哪個屬性進行平滑過渡、duration表示在多久內完成過渡、timing-function表示通過什麼方法進行平滑過渡。

另外結合CSS3中的transition-delay(多久之後開始過渡），可以完成更符合心意的動畫效果。

transition-property:background-color;
transition-duration:2s;
transition-timing-function:linear;
// 或
transition:background-color 2s linear;

transtion-delay:2s;

//或
transition:background-color 2s linear 2s;
 

完整程式碼

好了，以上就是用到的關鍵屬性的簡單介紹。以下是完整程式碼

HTML

<div class="demo2">transition</div>

CSS

.demo2{
            height:200px;
            width:200px;
            text-align: center;
            vertical-align: middle;
            background: #D3E393;
            color:white;
            margin:300px;
            transform: rotate(0deg);
            transition: width 2s,height 2s,transform 2s;
        }
        .demo2:hover{
            transition: width 2s ,height 2s, transform 2s;
            transition-timing-function: ease;
            transform: rotate(360deg);
            width:300px;
            height:300px;
        }
 

demo效果地址：這裡