过渡(transtion)

一.过渡

transition-property指定属性名称

all 所有属性都将获得过渡效果(默认)

attr 过渡效果的CSS属性名称列表,列表以逗号分隔

none 没有属性会获得过渡效果

transition-duration过渡时间

transition-delay延迟事件,多久之后再开始执行动画

transition-timing-function运动形式

linear 匀速

ease 慢块慢(默认)

ease-in 慢入

ease-out 慢出

ease-in-out 慢入慢出

cubic-bezier 贝塞尔曲线(x1,y1,x2,y2) 1) x1起点在x轴的坐标 为0-1 2) y1起点在y轴的坐标 不限 3) x2终点在x轴的坐标 为0-1 4) y2终点在y轴的坐标不限 起点对应的 y=x 为匀速,y>x 为加速,y<x 为减速 终点对应的 y=x 为匀速,y>x 为减速,y<x 为加速 参考:http://matthewlein.com/ceaser/

复合样式transition:property duration delay timing-function;

多属性写法transition:width 2s,height 4s;

二.动画

注意:animation必须与@keyframes一起使用

动画帧 @keyframes

@keyframeanimationname{

keyframes-selector{css-styles}

keyframes-selector{css-styles}

}

animationname animation的名称

keyframes-selector 动画时间百分比

css-styles 一个或多个合法的css样式属性

@keyframes run{

    0%{width:0px,background:red;}

    100%{width:50px,background:green;}

}

动画属性

animation-name 动画名称

animation-duration 动画执行时间

animation-delay 动画效果延迟时间

animation-timing-function 动画速度曲线1). linear 匀速2). ease 慢块慢(默认)3). ease-in 慢入4). ease-out 慢出5). ease-in-out 慢入慢出6). cubic-bezier

animation-iteration-count 动画执行循环次数1) infinite 无限循环2) 默认1次

animation-direction 动画是否反响运动1)  normal 默认 正常方向2) reverse 反方向运动3) alternate 动画先正后反方向运行4) alternate-reverse 先反后正方向运行

animation-play-state 动画执行状态1) running 运动,默认2) paused 暂停

animation-fill-mode 动画对象时间之外的状态1) none 默认 原始状态>动画>原始状态2) forwards 原始状态>动画>停在动画帧100%3) backwards (忽略原始状态)进入动画帧0%>动画>原始状态4) both (忽略原始状态)进入动画帧0%>动画>停在动画帧100%