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%{}
过渡和动画其中很多属性类似;过渡和动画完成后均会回归到原始状态.(特殊处理除外.)
使用时注意最大的区别是:
过渡是一个被动的过程,需要有一个触发点(事件)来启动/触发过渡的发生.
动画是一个主动过程,只要设置好相应的属性,就会自动发生.
