css3过渡和动画

一.过渡

transition:  过渡.  从一种样式逐渐改变为另一种的样式效果.

transition: property / duration / timing-function / delay;

    transition-property  规定应用过渡的CSS 属性的名称

    transition-duration  定义过渡效果花费的时间。默认是0。

    transition-timing-function  规定过渡效果的时间曲线。默认是"ease"。

    transition-delay  规定过渡效果何时开始。默认是0。

transition-timing-function：cubic-bezier（x1,y1,x2,y2）;

    cubic-bezier:贝塞尔曲线，一种速度曲线。

      X1 起点在X轴的坐标,为0~1

     Y1起点在Y轴的坐标,为0~1

      X2终点在X轴的坐标,为0~1

      Y2终点在Y轴的坐标,为0~1

      起点:对应的y=x 为匀速，y>x 为加速   y

      终点:对应的y=x 为匀速，y>x 为减速   y

二.动画

animation  自定义动画

    animation-name:动画名称

    animation-duration:动画执行时间

    animation-timing-function:动画速度曲线（贝塞尔曲线详解）

    animation-delay:动画效果延迟时间

    animation-iteration-count:动画执行次数

    animation-direction:动画执行方向

    animation-play-state:动画执行状态

    animation-fill-mode:动画对象的动画时间之外的状态

@keyframes:规定动画关键帧  from{}to{}  或者   0%{}100%{}

过渡和动画其中很多属性类似;过渡和动画完成后均会回归到原始状态.(特殊处理除外.)

使用时注意最大的区别是:

     过渡是一个被动的过程,需要有一个触发点(事件)来启动/触发过渡的发生. 

    动画是一个主动过程,只要设置好相应的属性,就会自动发生.