笔记: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:用来控制动画播放方向;