css3中的过渡和动画

过渡：
transition:2s---------加时间，然后hover中写过渡到什么样子
过渡曲线
transition-timing-function:ease-------缓慢开始，中间加速，后面缓慢这是默认的
transition-timing-function:linear-------规定从开始到结束相同的速度
transition-timing-function:ease-in-------规定缓慢开始的过渡效果
transition-timing-function:ease-out-------规定缓慢结束的过渡效果
transition-timing-function:ease-in-out-------规定开始和结束较慢
transition-timing-function:cubic-bezier(n.n.n)-------贝赛尔曲线
transition-delay：1s---------------------------延迟生效多少s
transition：2s(过度时间) linear（过渡的加速曲线） 2s（延迟生效时间）；
动画：
@keyframes example1 {------------------------------创建一个动画的名字，里面包含开始和结束
    from {
        background-color: red;
    }
    to {
        background-color: yellow;
    }
}或者
@keyframes example1 {------------------------------创建一个动画的名字，里面包含每个阶段的状态
    0% {
        background-color: red;
    }
    25% {
        background-color: yellow;
    }
    50% {
        background-color: blue;
    }
    100% {
        background-color: green;
    }
}
/* 应用动画的元素 */
.example1 {
    animation-name: example1;----------@keyframes后面跟的是上面编辑变化的名字
    animation-duration: 4s;
}
animation-delay:2s(这个数值也可以为负数)-----延迟动画：
animation-iteration-count: 3;--------------------运行次数
animation-iteration-count: infinite;---------------无限运行

反向或交替运行动画：
`animation-direction` 属性指定是向前播放、向后播放还是交替播放动画。
animation-direction 属性可接受以下值：
- `normal` - 动画正常播放（向前）。默认值
- `reverse` - 动画以反方向播放（向后）
- `alternate` - 动画先向前播放，然后向后
- `alternate-reverse` - 动画先向后播放，然后向前

 速度曲线：
`animation-timing-function` 属性规定动画的速度曲线。
animation-timing-function 属性可接受以下值：
- `ease` - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
- `linear` - 规定从开始到结束的速度相同的动画
- `ease-in` - 规定慢速开始的动画
- `ease-out` - 规定慢速结束的动画
- `ease-in-out` - 指定开始和结束较慢的动画
- `cubic-bezier(*n*,*n*,*n*,*n*)` - 运行您在三次贝塞尔函数中定义自己的值

### 填充模式
CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。`animation-fill-mode` 属性能够覆盖这种行为。
在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。
animation-fill-mode 属性可接受以下值：
- `none` - 默认值。动画在执行之前或之后不会对元素应用任何样式。
- `forwards` - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
- `backwards` - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
- `both` - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
Geolocation-------------获取用户地理位置的接口

帧动画---------------steps（8）--------里面的数值意思是把图分为几帧

。。。。