CSS3——动画

animation

android设备必须加webkit前缀才能实现动画效果

animation-name

animation-name：检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义，如果提供多个属性值，以逗号进行分隔。

语法：animation-name: keyframename | none;

1.keyframename--指定要绑定到选择器的关键帧的名称。

 2.none ： 默认值，指定没有动画（可用于覆盖从级联的动画）

​​​​animation-duration

animation-duration：检索或者“设置”对象动画的“持续时间”，手机端添加-webkit- 前缀来兼容

语法  animation-duration ：time；  time 指定动画播放完成的时间，默认值为0， 意味着没有动画效果

animation-timing-function

animation-timing-function：检测或设置对象动画的过渡类型

语法  animation-timing-function：linear | ease | ease-in | ease-out | ease-in-out 等

animation-delay

animation-delay：动画延时属性

语法  animation-delay：time；默认是0

animation-delay: -2s;   允许负值，-2s使动画马上开始，但会跳过动画的前2s。

animation-iteration-count

animation-iteration-count：动画循环次数

animation-iteration-count : infinite（无限）/ number ( 默认为1 )。

此属性改变的是动画之内的状态，而annimation-delay是动画之外的属性。动画结束后不延迟，直接播放下一次。

animation-direction

normal默认值            reverse反方向

alternate先正后反交替（反转）（前提是要设置循环animation-iteration-count:infinite(这是是无限循环)）

alternate-reverse（前提是要设置循环）先反再正，交替

animation-fill-mode

animation-fill-mode：规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到元素的样式。

语法   animation-fill-mode：none | forwards | backwards | both | initial | inherit；

none：默认值。不设置对象动画之外的状态；

forwards：设置对象状态为动画结束时的状态；

backwards：设置对象状态为动画开始时的状态；

both：设置对象状态为动画结束或开始的状态；

animation-play-state

animation-play-state：指定动画是否正在运行或已暂停。

语法   animation-play-state：paused | running；

paused：指定暂停动画；     running：默认值，指定正在运行的动画。

一般配合javascript使用，使用hover也能实现效果

animation简写

animation ： name duration timing-function delay iteration-count direction fill-mode play-staye ;

@keyframes

关键帧，可以指定任何顺序排列来决定animation动画变化的关键位置。

使用说明：使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。在动画过程中可以通过@keyframes规则多次更改CSS样式的设定。

语法：

@-webkit-keyframes animationname{
    keyframes-selector{
        css-style；
    }
}
//-webkit- 是为了兼容手机端

keyframes-selector：必写项，动画持续时间的百分比，0-100%、from(0%)、to(100%)。

css-style：必写项，一个过多个合法的css样式属性。

CSS3 will-change

增强页面渲染性能，will-change提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置

语法     will-change：auto | scroll-position | contents | <custom-ident> | <animateable-feature>

            auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化。

            scroll-position：表示将要改变元素的滚动位置。

            contents：表示将要改变元素的内容。

            <custom-ident>：明确指定将要改变的属性与给定的名称 如 will-change：transform；建议使用这个

            <animateable-feature>：可动画的一些特征值，如 will-change：left / top / margin 等

使用注意：勿滥用、提前声明、remove（使用hover或者JavaScript释放）