CSS3过渡和动画

CSS3 过渡和动画,区别这两个概念,有助于记忆其属性。

  1. 过渡:一点到另一点;没有完成时间,runstyle(贝塞尔曲线)及循环方式的概念。
    css3的transform属性里,无论是rotate,scale,skew,translate 都只是两点之间的样式转换,是为过渡。
    rotate:(@deg); 旋转
    scale:(@h,@v); 缩放 @h,@v 代表水平和垂直缩放比例(interger)
    skew:(@h-deg,@v-deg); 倾斜 @h-deg,@v-deg 代表水平和垂直倾斜角度
    translate:(@h-dis,@v-dis);移动 @h-dis,@v-dis 代表水平和垂直的移动距离

  2. 动画:一点到另一点再到另一点;可以设置完成时间,runstyle,以及循环方式。
    transition属性选项:
    @attr 要变化的css style属性;
    @time 完成动画的时间(s为单位);
    @style 完成动画的节奏;
    CSS3过渡和动画_第1张图片

animation属性选项:
@attr 要变化的css style属性;
@time 完成动画的时间(s为单位);
@style 完成动画的节奏;
@loopstyle 循环次数(interger,’infinite’=>代表无限循环)

补充:
cubic-bezier(x1,y1,x2,y2) 是控制贝塞尔曲线弧度的函数,也是控制css3动画节奏的的魔法棒,利用它可在手机端绘制戳绚丽的动效

你可能感兴趣的:(html+css,苦修之路,css3,动画,过渡)