css——動畫（transform, transition, animation）

標籤：ini   詳解   視圖   常用   位置   100%   url   需要   gif   

transform

• 靜態屬性，一旦寫進style裡面，會立即顯示作用，無任何變化過程。（類似於left, right, top, bottom這類屬性）
• 主要用來做元素的變形
• 改變元素樣式的屬性主要有以下五個
  • translate3d(x,y,z) 用來控制元素在頁面的三軸上的位置
  • rotate(10deg) 是用來控制元素旋轉角度（度deg）
  • skewx,y 製作斜度，2d裡面建立3d透視圖的必備屬性
  • scale3d(2, 1.5, -6) 用來放大縮小效果，屬性是比值
  • matrix3d css矩陣，不常用
• 執行個體

.demo{    -webkit-transform: rotate(360deg) skew(-20deg) scale(3) translate(100px, 0);}

transition : transition-property transition-duration transition-timing-function transition-delay;

• 動畫屬性，允許css的屬性值在一定的時間區間內平滑的過渡
• 主要有以下四個屬性：
  • transition-property: none(沒有屬性改變） | all(所有屬性改變) | indent(元素屬性名稱)
  • transition-duration: 500ms; 指定元素轉換過程的期間
  • transition-timing-function: linear(勻速) | ease(逐漸慢下來) | ease-in (加速) | ease-out( 減速) | ease-in-out(先加速後減速）；
  • transition-delay: 0.3s; 當該百年元素屬性值後多久時間開始執行transition效果
• 執行個體

a{    transition : background .5s  ease-in, color .3s ease-out;    transition : transform .4s ease-in-out;}

animation

+為元素實現動畫效果，需要和@keyframes一起配合使用，將一套css樣式轉化成另一套樣式

• 若是考慮相容，需要加上-webkit-， -o-, -ms-, -moz- 等
• @keyframes 類似flash中的時間軸和主要畫面格
  @keyframes animationname{
  keyframes-selector { //建議用0~100%，from(0), to(100%)
  css-styles;
  }
  }
• 執行個體

.load-border{    width: 100px;    height:100px;    background: url(‘a.png‘) no-repeat center center;    -webkit-animation : gif 1.4s infinite linear;    animation: gif 1.4s infinite linear;}@keyframes gif{     0% {        -webkit-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(360deg);        transform: rotate(360deg);        width:200px;    }}

參考連結：
MDN | transition過度
sf | css3動畫屬性詳解之transform、transition、animation

css——動畫（transform, transition, animation）