标签：
一.什么是过渡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:用来控制动画播放方向;
笔记:css之过渡和动画
标签：
原文地址：http://www.cnblogs.com/wwwzsfcom/p/5667972.html
