动画与滤镜

动画与滤镜

动画

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（）将产生一个完整的灰度图片）。