动画样式

一.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取值任意

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

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

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

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

复合样式写法：

transition:
   transition-property  transition-duration transition-delay  transition-timing-function
   
例子：   
   transition:width 1s 2s linear;
   

过渡动画语法：

.box{
            position: relative;
            left: 0;
            width: 200px;
            height: 200px;
            background:url("./images/bb.jpg") no-repeat center/cover;
            transition:width 1s 2s linear;
        }

二.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;
            }
        }