动画样式

一.CSS3 触发式动画

常用触发动作：

1. 鼠标悬浮：hover
2. 选项选中：checked
3. 输入框点击：active
4. 聚焦后:focus

过渡动画（transition）：

 通过过渡可以指定一个属性发生变化的切换方式
通过过渡可以提升用户体验

过渡所需要的条件

开始状态  结束状态  过程所消耗的时间

 过渡时间 (transition-duration)   
    时间单位
    默认是 0s  单位 s(秒)  ms(毫秒) 
    1s = 1000ms

transition-delay  过渡的延时
    表示变化延后多少秒过渡
    默认是 0s  可以为正数也可以为负数
    负数代表提前多少秒动
    整体过渡运动时间  =  duration + delay

ransition-property  过渡的属性
    规定过渡属性作用于元素哪条样式上面
        可选值
            1.all  所有样式都生效 默认
            2.none  没有过渡属性
            3. 多个样式名  逗号分割  指定样式过渡

transition-timing-function 过渡速率
    描述什么时候变化快什么变化慢
        可选值:
            ease 默认值 慢速开始 先加速 再减速
            linear 匀速运动
            ease-in 开始慢 后面快
            ease-out 开始快  后面慢
            ease-in-out 两头慢 中间快
            贝塞尔曲线
            越陡速度越快
            水平运动时间  竖直是随着时间推移运动的距离
            cubic-bezier(.3,-0.97,1,.21);
            x1  y1 x2 y2
            x1 和 x2 取值是 0 -1
            y1 和 y2 取值任意

复合样式写法：transition:
    transition-property  transition-duration transition-delay  transition-timing-function
    
例子：transition:width 1s 2s linear;

过渡时间不可以省略, 其他都可以省略
顺序随意  写两个时间 第一个持续时间第二个延迟

过渡时间写在不同的位置, 效果不一样
            1. 开始没有  结束也没有
                什么都不写
            
            2. 开始有  结束也有
                写在原始元素身上
            
            3. 开始没有  结束有
                原始元素写过渡时间 hover 伪类里面 0s

            4. 开始有  结束没有
                写在 hover 伪类里面

大部分属性都支持过渡效果, 注意过渡是一个有效数值过渡到另一个数值
写过渡效果必须明确变化开始, 结束, 时间.

二.CSS3 主动式动画（animation）

什么是动画

 一张张画面拼接而成的效果  一张张画面又叫做关键帧
 利用的原理
 视觉暂留 

动画的表示

1. 动画名称 时间

2. 动画过程中描述  可以使用百分比区域描述动画的进程 

N 个关键帧有 N - 1 个动画

动画和过渡的区别

 过渡: 的变描述样式开始和结束状态化过程  需要手动触发

动画: 不需要触发条件 自己动 动画可以有多个状态可以无限循环

动画的属性

1.animation-name 动画名称
2.animation-duration 动画持续时间
3.animation-delay  动画的延迟
4.animation-timing-function 动画速率 steps（运动步长）5.animation-iteration-count 动画运动次数
    默认运动一次 可以写数值表示运动几次 运动完回到初始位置
    无限次运动  infinite
6.animation-fill-mode 动画结束时候的状态
    backwards 默认为回到初始位置
    forwards  执行动画保留最后状态
7.aniamtion-direction 动画的方向
    防止元素出现不连贯的情况
    可选值
        normal（0- 100）reverse  (100-0) 
        alternate(0 - 100 - 0) 运动次数大于等于 2 才能看到效果
        alternate-reverse(100 - 0 - 100)  运动次数大于等于 2 才能看到效果

动画的复合写法：

animation: name(名称) duration(时间)  timing-function(速率) delay(延迟)  iteration-count(次数) direction(执行方向) fill-mode paly-state 动画的暂停

语法：

.wrap{
            width: 127.5px;
            height: 240px;
            background: url(./images/1.jpg);
            animation: move 1s steps(4) infinite;
        }


 @keyframes move {
            0%{background-position: 0 0;}
            100%{background-position: -510px 0;}
        }