CSS3 常用四個動畫（旋轉、放大、旋轉放大、移動）

在頁面設計中，給一些圖示或者圖片加上一些動畫效果，會給人非常舒服的感覺。這裡收集了四個常用動畫效果，以便不時之需。

轉載原文

效果一：360°旋轉 修改rotate(旋轉度數)

* {    transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out;    -moz-transition:All 0.4s ease-in-out;    -o-transition:All 0.4s ease-in-out;}*:hover {    transform:rotate(360
 
deg);    -webkit-transform:rotate(360deg);    -moz-transform:rotate(360deg);    -o-transform:rotate(360deg);    -ms-transform:rotate(360deg);}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

效果二：放大 修改scale(放大的值)

* {    transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out;    -moz-transition:All 0.4s ease-in-out;    -o-transition
 
:All 0.4s ease-in-out;}*:hover {    transform:scale(1.2);    -webkit-transform:scale(1.2);    -moz-transform:scale(1.2);    -o-transform:scale(1.2);    -ms-transform:scale(1.2);}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

效果三：旋轉放大 修改rotate(旋轉度數) scale(放大值)

* {    transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out
 
;    -moz-transition:All 0.4s ease-in-out;    -o-transition:All 0.4s ease-in-out;}*:hover {    transform:rotate(360deg) scale(1.2);    -webkit-transform:rotate(360deg) scale(1.2);    -moz-transform:rotate(360deg) scale(1.2);    -o-transform:rotate(360deg) scale(1.2);    -ms-transform:rotate(360deg) scale(1.2);}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

效果四：上下左右移動 修改translate(x軸,y軸)

* {    transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out;    -moz-transition:All 0.4s ease-in-out;    -o-transition:All 0.4s ease-in-out;}*:hover {    transform:translate(0,-10px);    -webkit-transform:translate(0,-10px);    -moz-transform:translate(0,-10px);    -o-transform:translate(0,-10px);    -ms-transform:translate(0,-10px);}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

下為我的補充

SCSS改造

這樣的程式碼不利於我們在工作中的使用。這裡我強烈推薦大家使用scss來書寫css樣式。

// 執行動畫以及執行時間設定@mixin dz($time:0.25s){    -webkit-transition: all $time ease-in-out;    -moz-transition: all $time ease-in-out;    -o-transition: all $time ease-in-out;    -ms-transition: all $time ease-in-out;    transition: all $time ease-in-out;}// 宣傳動畫呼叫@mixin xz($deg:360){    transform:rotate($deg+deg);    -webkit-transform:rotate($deg+deg);    -moz-transform:rotate($deg+deg);    -o-transform:rotate($deg+deg);    -ms-transform:rotate($deg+deg);}// 放大動畫@minxin fd($s1:1.2){    transform:scale($s1);    -webkit-transform:scale($s1);    -moz-transform:scale($s1);    -o-transform:scale($s1);    -ms-transform:scale($s1);}// 旋轉放大動畫@mixin xzfd($deg:360,$s1:1.2){    transform:rotate($deg+deg) scale($s1);    -webkit-transform:rotate($deg+deg) scale($s1);    -moz-transform:rotate($deg+deg) scale($s1);    -o-transform:rotate($deg+deg) scale($s1);    -ms-transform:rotate($deg+deg) scale($s1);}// 移動動畫@mixin yd($s1:0,$s2:0){    transform:translate($s1,$s2);    -webkit-transform:translate($s1,$s2);    -moz-transform:translate($s1,$s2);    -o-transform:translate($s1,$s2);    -ms-transform:translate($s1,$s2);} 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40

使用方法

#somebox{    @include dz();    &:hover {        @include yd(-10px,-10px);    }}

• 1
• 2
• 3
• 4
• 5
• 6

更多SCSS使用方法，請百度“SASS”

 

SASS 是無花括號的純縮排寫法，不利於前端人員熟悉。因此，推出了有花括號版本的SCSS兩者的語法是一致的。只是有沒有花括號的差別。我們在工作中，一般都使用SCSS來書寫CSS，但是，在查詢SCSS問題的時候，一般搜尋SASS