C3的过渡动画及3D效果

一.动画的基本语法和参数

 1,过渡:transition:使元素指定属性从A状态过渡平滑过渡到B状态，而不是直接过去，

    2.语法:transition:all 1s ease 0s;

    第一个参数:需要过渡的属性 ,all(默认)所有属性都过渡   基本上所有属性都能过渡  不能过渡:float/渐变*/

    第二个参数:过渡时间 s

    第三个参数: 缓冲描述词,速率  ease:逐渐变慢  linear:匀速过渡  ease-in:先慢后快  ease-out:先快后慢    ease-in-out:先慢后快再慢

    第四个参数:延迟时间 0s就是不延迟

二.animation动画属性

语法：animation:box 3s infinite 0s;

定义动画：@keyframes 动画名称{

        from{

            A 状态

        }to{

            B 状态

        }

        /*0%~~100%*/

       0%{

        }

animation动画属性：

 1.animation-name:动画的名称

    2.animation-duration:动画持续时长

    3.animation-timing-function:定义动画的速率 ease -in - out - 贝塞尔曲线

    4.animation-delay:延迟时间

    5.animation-iteration-count:播放次数   infinite:无限次数

    6.animation-direction:动画播放方向

        nomal:一直向前播放,当到最后一帧会回到第一帧;

        reverse:跟normal方向相反

        alternate:往复播放

        alternate-reverse:跟alternate反向

    7.animation-fill-mode ： forwards：动画播放完毕回到第一帧的状态

            none:默认,不设置   both:动画播放完毕后会回到结束或开始状态,结束状态优先

       8.animation-play-state:控制动画播放   paused:暂停动画  running:启动继续播放

三.transfrom 3D效果

1. perspective: 400px;     先给父元素设置景深：眼睛距离舞台的位置

2.反面效果：/*   backface-visibility:hidden

 设置元素背面是否可见

        visible:可见;

        hidden:不可见;*/

        transform-style: preserve-3d;

        flat:平面2D显示;

---

transform:   旋转     rotate(30deg) ：定义2D旋转，参数角度

                                rotateX()定义沿着X轴的3D旋转   正值:向后躺       负值:向前趴

                                rotateY()定义沿着Y轴的3D旋转    正值:向里转       负值:向外转

                                rotateZ()定义沿着Z轴的3D旋转

                                none:不旋转

                                perspective   景深:眼睛距离舞台的距离   3D变形要有舞台概念，添加景深，单位是px

                                度数:正值是顺时针转     负值是逆时针转

                     缩放： scale()  scaleX()    scaleY()    度数:大于1是放大,小于1是缩小

                     变形斜切：skew(x,y)：定义沿着X轴和Y轴的2D斜切转换

                                      skewX()：定义沿着X轴的2D斜切转换

                                      skewY()：定义沿着Y轴的2D斜切转换    

                                      第一个参数表示横向斜切      第二个参数表示纵向斜切

                      移动：translateX()：定义对象x轴的平移

                                translateY()：定义对象Y轴的平移

                                translateZ()：定义对象Z轴的放大缩小，效果和scale相同

                     transform-style: 设置组合体的显示方式:

                                                            flat:平面2D显示;

                                                            preserve-3d:立体3D显示

                       多个形变用空格隔开

                      参考位置：transform-origin 属性允许改变被转换元素的参考位置

                            设置旋转轴

                            第一个参数是横向位置(具体尺寸0px/方向描述性参数：left/right/bottom/top/center/还可以用百分比)

                            第二个参数是纵向位置

                            left top 相当于  0 0

                            top  center 相当于   0  50%

                            right  top 相当于 100% 0

                            沿x轴转  : top:0%   center:50%   bottom:100%;

                            沿y轴转  : left:0%  center:50%   right:100%

建议：上手操作，加深印象