CSS3之过渡和动画

过渡

transition-property:none | all | property
transition-duration:time
transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[start | end]?) | cubic-bezier(<number>,<number>,<number>,<number>)

• linear 线性过渡 匀速
• ease 平滑过渡
• ease-in 由慢到快
• ease-out 由快到慢
• ease-in-out 慢-快-慢
• cubic-bezier(<number>,<number>,<number>,<number>) 贝塞尔曲线

transition-delay-time:time
简写方式
transition:property duration timing-function delay

transition:transform 2s ease-in-out 1s;

动画

animation-name:keyframename | none;

• keyframename:指定要绑定到选择器的关键帧的名称
• none:指定有没有动画(可用于覆盖从级联的动画)

animation-duration:time;
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[start | end]?) | cubic-bezier(<number>,<number>,<number>,<number>)
animation-delay:time;
animation-iteration-count:infinite | <number>;
检索或设置对象动画的循环次数
animation-direction:normal | reverse | alternate | alternate-reverse | initial | inherit
检索或设置对象动画在循环中是否反向运动

• normal 正常方向
• reverse 反方向
• alternate 动画先正常运行再反方向运行,并持续交替运行
• alternate-reverse 动画先反方向运行再正方形运行,并持续交替运行
  交替运行时依赖于动画的循环次数的

animation-fill-mode:none | forwards | backwards | both | initial | inherit
规定当动画不播放时(当动画完成或当动画有延迟未开始播放时),要应用到元素的样式

• none 默认值,不设置对象动画之外的状态
• forwards 设置对象状态为动画结束时的状态
• backwards 设置对象状态为动画开始时的状态
• both 设置对象状态为动画结束或开始的状态

animation-play-state:paused | running;
指定动画是否正在运行或已暂停
简写方式

animation: name duration timing-function delay iteration-count direction fill-mode play-state

name duration 是必须的,会优先判断这两个值

@keyframes

创建动画,通过逐步改变一个CSS样式设定到另一个,在动画过程中可以通过@keyframes规则多次更改CSS样式的设定

@keyframes animationname{
    keyframes-selector{
        css-styles;
    }
}

参数说明:
animationname:必写项,定义animation的名称
keyframes-selector:必写项,动画持续时间的百分比,0-100%,from(0%),to(100%)
css-styles:必写项,一个或多个合法的CSS样式属性