笔记:css之过渡和动画

一.什么是过渡transition?

1.能够在一定时间内使CSS属性平滑的变化;

2.过渡效果的执行需要一个触发.\

常用的过渡属性.

1.主要包含:

transition:none/all/indent(默认只执行一个为默认属性);

2.transition-duration:过渡持续的时间,默认为0;

3 .transition-timing-function;允许根据时间改变属性变化的速率;

值:(1).ease 逐渐变慢,

(2).linear 匀速,

(3).ease-in  加速,

(4).ease-out 减速,

(5).ease-in-out 先加速后减速;

(6).cubic-bizer 自定义时间曲线;(x1,y1,x2,y2)(0~1);

4.transition-delay:设置触发后多长时间执行;

5.缩写:transition:属性1 4s,属性2 4s,属性3 4s,linear(匀速)/ease-in(加速)/ease-out(减速)/ease-in-out(先加速后减速)/…  2s ;

二.动画

1.关键帧;

(1).表示符:keyframs:

语法结构:@keyframs name{0%{css样式}10%{color:red;}}:规则用于声明动画

(2).animation与transition:不同点:动画不用触发.相同点:都可以通过时间改变css属性.

2.属性:

animation-name:给动画起一个名称;

animation-duration:设置动画持续周期;

animation-timing-function:设置速率:ease减速, linear匀速,ease-in加速,ease-out减速,ease-in-out先加速后减速;cubic-bezier:贝塞尔曲线;animation-delay:延迟;

animation-iteration-count:动画执行次数;默认一次,infinite(无穷大的)

animation-play-state:用来控制动画播放状态:running:(启动) paused(中止的,暂停的)

animation-direction:用来控制动画播放方向;