过渡
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样式属性
