CSS-动画

动画

transform变换

• 对元素进行平移，旋转，缩放，而对其他元素无影响
• translate平移，rotate旋转，scale缩放，可以都放在一个transform-list属性进行设置，空格隔开
• translate和scale可以指定在X/Y上进行平移或者缩放
• transform-origin属性可以改变旋转变化中心点，（0，0）为左上角

3D transform

• 不影响元素本身的渲染，仅仅是扩充了一个Z轴，使其具有3D效果
• translate3d(),translateZ,rotate3D,rotateX,rotateY都属于3D transform

transition过渡

• 过渡条件transition-property
• 过渡持续时间transition-duration
• 过渡速度变化transition-timing-function
• 过渡延迟transition-delay
• 可放在一行写transition: property duration timing-function delay;

animation动画行为

• 一般用一个属性写成animation: name duration timing-function delay iteration-count direction;
• name为绑定选择器keyframes名称（keyframes用@命名）
• duration为完成动画所花费的时间
• timing-function delay规定动画的速度曲线
• delay规定动画延迟
• iteration-count规定动画播放次数
• direction规定动画是否轮流反向播放

keyframes

Advanced Selector

• target类，表示元素被hash（#）匹配时的状态
• lang类，表示元素匹配上指定语言时的状态
• nth-child类，通过后加表达式（an+b）选中某些子元素
• nth-of-type类，通过表达式选中某些子元素，在父类型的相同子类型中选
• first-child和last-child类，选中第一个/最后一个子元素
• not()类，排除匹配的元素
• 还有其他各种各样的选择器