CSS过渡、变形与动画

学习笔记

一，过渡
    什么是过渡
        CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
    transition属性
        duration
        property
        delay
        timing-function
    transiton子属性
        none：没有属性会获得过渡效果
        all：默认值，所有属性获得过渡效果
        property:定义 应用过渡效果的CSS属性名称列表
        time值：以秒或毫秒计，默认是0，意味着没有任何效果
        timing-function：规定过渡效果的时间曲线
            linear:规定以相同速度开始至结束的过渡效果
            ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
            ease-in：规定以慢速开始的过渡效果
            ease-out：规定以慢速结束的过渡效果
            ease-in-out：规定以慢速开始和结束的过渡效果
            cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值

二，变形
    tansform-functions:用于设置变形函数，可以是一个或多个变形函数列表
        rotate(angel)    旋转元素
        skew(x-angel,y-angel)    倾斜元素
        skewX(angel)    沿着X轴倾斜
        skewY    沿着Y轴倾斜
        scale(x,y)    缩放元素，改变元素的高度和宽度
        scaleX    改变元素的宽度
        scaleY    改变元素的高度
        translate(x,y)    移动元素对象，基于x和y坐标重新定位元素
        translateX(x)    沿着x轴移动元素
        translateY(y)    沿着Y轴移动元素

三，动画
    animation属性
        tansform-functions:用于设置变形函数，可以是一个或多个变形函数列表
        animation子属性
            animation-duration：规定动画完成一个周期所花费的时间
                time值：以秒或者毫秒计算，默认是0
            animation-timing-function：规定过渡效果的时间曲线
                linear:规定以相同速度开始至结束的过渡效果
                ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。
                ease-in：规定以慢速开始的过渡效果
                ease-out：规定以慢速结束的过渡效果
                ease-in-out：规定以慢速开始和结束的过渡效果
                cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。
            animation-delay：规定开始之前需要等待的时间
                time值：以秒或毫秒计，默认是0
            animation-iteration-count：规定动画播放的次数
                n：定义动画播放次数的数值，默认为1
                infinite：规定动画应该为无限次播放