css3动画属性

动画

没有动画之前遗留很多的问题
如：

• 需要重复过渡效果时无法实现
• 只能通过hover等方式才能出发

1.1动画

• 通过@keyframs定义动画。
• .在指定元素中，通过animation属性来调用动画。
  定义动画
  格式：

	@keyframes 动画名 {
                from{
                    /* 初始帧 */
                }
                to{
                    /* 结束帧 */
                }
            }

【注】动画名不要起关键字，最好见名知意。

1.2动画的调用

通过animation属性来调用动画。
animation-name：动画名称（名称为自己起的）

animation-duration 执行一次动画的完成时间

animation-iteration-count: 动画的执行次数 infinite 表示无数次。

animation-delay: 动画延迟执行的时间。

animation-fill-mod

• forwards：在动画结束后，盒子保持结束帧状态。
• backwards 在动画开始时，包含延迟时间，让盒子保持初始帧状态
• both backwards forwards都生效
• none(默认值，动画结束后，直接返回到初始点）

animation-direction: 动画的执行方式
alternate：交替执行。
normal 正常（默认）
reverse 反向 从结束帧开始到初始帧结束
【注】alternate 反向也会算一次执行时间。
animation-timing-function：

• linear 匀速
• ease-in 加速
• ease-out 减速
• ease-in-out 先加速后减速
  animation-play-state 动画运行状态
• paused:暂停
• running 运行
  【注】动画属性要有中间状态，一般是数值型。
  复合写法：名称 执行时间 这两个必须按照此顺序写在前边，后面不需要遵守，可以随意写属性要空格隔开
  

滤镜

filter: opacity 透明度


filter: grayscale()灰度

filter: invert()反色

只有0和1，0为关闭1为开启

filter: brightness(1);亮度

filter: saturate（)饱和度

filter: sepia();褐色

filter: blur();模糊使用频繁

filter: hue-rotate();色相反转

filter: contrast()对比度


filter: drop-shadow（);阴影

boxshadow与filter: drop-shadow的区别