HTML5复习 (16)

CSS3动画

animation

一、animation-name

检索或设置动画名称

animation-name:keyframename | none;

keyframename 绑定到选择器的关键帧名称(后面详细做笔记)

none: 指定有没有动画

二、animation -duration

animation-duration：time

默认值是0 没有动画效果

三、animation-timing-function

和CSS3transition用法相似

四、animation-delay

动画延迟

五、animation-iteration-count

循环播放次数

animation-iteration-count：infinite | none ;

infinite 无限次播放

六、animation-direction

是否反方向运动

animation-direction：normal reverse alternatealternate-reverse initial inherit

normal正常方向

reverse反方向运行

alternate 先正常运行 在反方向运行

alternate-reverse 先反方向运行，在正方向运行

七、animation-fill-mode

规定当动画不播放的时，（当动画延迟播放或者已经播放完成的时候），要应用的元素的样式

animation-fill-mode:none | forwards | backwards | both

none 不设置对象动画之外的状态

forwards设置为动画结束时的状态

backwards 设置为动画开始时的状态

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

八、animatiton-play-state属性

指定动画是在运行还是暂停

animatiton-play-state:paused | running

九、keyframename

@keyframename animationname{

    keyframes-selector{

        css-styles;

    }

}

animationname:必写项，定义animation的名称。

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

css-styles：:必写项，一个或多个合法的CSS样式属性。

例子：

@-webkit-keyframes example {

    0%(或者from)  { transform:rotateX(0deg);      }

    25%                  { transform:totateX(45deg);    }

    75%                 { transform:totateX(315deg);  }

    100%(或者to)  { transform:totateX(350deg);  }

}

@keyframes example {

    0%(或者from)      { transform:rotateX(0deg);      }

    25%                     { transform:totateX(45deg);    }

    75%                    { transform:totateX(315deg);  }

    100%(或者to)      { transform:totateX(350deg);  }
}

十、will-change

一开始用 translateZ()  (or translate3d()) Hack 触发GPU加速，但是占用RAM和GPU储存空间。

will-change会提前通知浏览器将要做什么动画，让浏览器提前做准备。

will-change:auto | scroll-position | contents | <custom-ident> |<animateale-feature>

auto 没有特定意图，适用于通常所做的任何启发式和优化。

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

contents 将要改变元素内容

<custom-ident> 明确改变的属性和名称

<animateale-feature> 动画的一些特征值，top left等

注意：

不能滥用，要移除、提前声明。