CSS过渡、变形与动画

 CSS过渡、变形与动画

    过渡

 概念
            CSS3 过渡是元素从一种样式逐渐改变为另一种的效果

语法规则
            选择器{
    transition:property duration timing-function delay
        }
            tansition属性实现简单的动画效果
transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性
            transition子属性
                property：规定应用过渡的CSS属性的名称
                    取值：
none：没有属性会获得过渡效果
all：默认值，所有属性获得过渡效果
property:定义 应用过渡效果的CSS属性名称列表
                duration：定义过渡效果花费的时间
                    取值：
time值：以秒或毫秒计，默认是0，意味着没有任何效果
                timing-function：规定过渡效果的时间曲线
                    取值：
linear:规定以相同速度开始至结束的过渡效果
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in：规定以慢速开始的过渡效果
ease-out：规定以慢速结束的过渡效果
ease-in-out：规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值
                delay：规定开始之前需要等待的时间
                    取值：
time值：以秒或毫秒计，默认是0

    变形

        transform属性
            允许对元素应用2D转换，常见的2D转换：
                倾斜
                移动
                旋转
                缩放
   语法规则
            选择器{
    transform:none | transiform-functions
}
            tansform-functions:用于设置变形函数，可以是一个或多个变形函数列表
        2D转换常用函数
            （angel是度数值，代表旋转角度）
                skew(x-angel,y-angel)    倾斜元素
                rotate(angel)     旋转元素
                skewX(angel)    沿着X轴倾斜
                skewY    沿着Y轴倾斜
            代表缩放比例，取值包含正数、负数和小数
                scale(x,y)缩放元素，改变元素的高度和宽度
                scaleX改变元素的宽度
                scaleY改变元素的高度
            元素移动的数值，x代表左右方向，y代表上下方向，向左和向上使用负数，向右和向下使用正数
                translate(x,y)移动元素对象，基于x和y坐标重新定位元素
                translateX(x)沿着x轴移动元素
                translateY(y)沿着Y轴移动元素

    动画

        CSS动画的主要组成部分
            1.一组定义的动画关键帧
2.描述该动画的CSS声明
        关键帧
            关键帧表示动画过程中的一个状态，多个关键帧就可以形成一组绚丽的动画。
            @keyframes animationname{
    keyframes-selector{css-style}
}
            animationname是当前动画的名称
keyframes-selector:是关键帧选择器
css-style:当前关键帧的动画状态
        animation属性
            animation属性，用于设置动画的名称、时间、时间曲线等属性，它是一个复合属性。
            语法规则
                选择器{
    animation:name duration timing-function 
        delay iteration-count 
}
                transform-functions：用于设置变形函数，可以是一个或多个变形函数列表
            animation子属性
                animation-name：规定@keyframes动画的名称
                    取值：
keyframe name：规定需要绑定到选择器的keyframe的名称
none:规定无动画效果（可用于覆盖来自级联的动画)
                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：规定动画应该为无限次播放