動畫與濾鏡

動畫

1.通過@keyframs定義動畫。

2.在指定元素中，通過animation屬性來呼叫動畫。

1.定義動畫

格式：

​ @keyframes 動畫名 {

​ from{

​ /* 初始幀 */

​ }

​ to{

​ /* 結束幀 */

​ }

​ }

  @keyframes move {
            0%{
                /* 初始幀 */
                transform: translate(0px,0px);
            }
              @keyframes move {
            0%{
                /* 初始幀 */
 

                transform: translate(0px,0px);
                  }
            }

【注】動畫名不要起關鍵字，最好見名知意。

2.動畫的呼叫：

通過animation屬性來呼叫動畫。

animatio-name：動畫名稱

animation-duration 執行一次動畫的完成時間。

animation-iteration-count: 動畫的執行次數 infinite 表示無數次。

animation-delay: 動畫延遲執行的時間。

animation-fill-mode:

forwards：在動畫結束後，盒子保持結束幀狀態。

backwards 在動畫開始時，包含延遲時間，讓盒子保持初始幀狀態

both backwards forwards都生效

none(預設值)

animation-direction: 動畫的執行方式

alternate：交替執行。

normal 正常（預設）

reverse 反向 從結束幀開始到初始幀結束。

【注】alternate 反向也會算一次執行時間。

animation-timing-function:linear;

linear 勻速

ease-in 加速

ease-out 減速

ease-in-out 先加速後減速

animation-play-state 動畫執行狀態

paused:暫停

running 執行

【注】動畫屬性要有中間狀態，一般是數值型。

濾鏡

/* 模糊 0-1 /
filter: blur(2px)

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

/* 陰影 /
filter: drop-shadow(5px 5px 5px #aaa)

img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}

/* 對比度 /
filter: contrast(2)

img {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}

/* 色相翻轉 deg /
filter: hue-rotate(90deg)

img {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}

/* 褐色 0-1 /
filter: sepia(60%)

img {
    -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
    filter: sepia(100%);
}

/* 飽和度 0-1 /
filter: saturate(60%)

img {
    -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
    filter: saturate(800%);
}

/* 亮度 0-1 /
filter: brightness(1)

img {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}

/* 反色 /
filter: invert(1)

img {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}

/* 灰度 /
filter: grayscale(50%)

img {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}

/* 透明度 */
filter: opacity(25%)

img {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    filter: opacity(30%);
}

使用多個濾鏡，每個濾鏡使用空間分隔。

**注意：**依次是非常重要的（例如使用grayscale（）後再使用sepia（）將產生一個完整的灰度圖片）。