h5c3内容05

3D转换、动画(animation)

3D转换

3D坐标轴：
用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。如下图

透视:perspective

透视:如果希望看到3d效果,需要给透视设置给变换元素的父盒子,透视的值越大,效果越不明显

可以将一个2D平面，在转换的过程当中，呈现3D效果。（没有perspective，便“没有”Z轴）;

透视近大远小、需要设置给变换元素的父盒子、透视的值越大效果越不明显

translateZ必须配合透视才能看到效果

如果希望子盒子能保持真正的3d效果需要给父盒子添加transform-style:preserve-3d;

盒子背面不可见属性：
Backface-visibility:hidden; 背面隐藏

动画animation

必要元素：

a、通过@keyframes指定动画序列；
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素；

css3中的动画 需要先定义 在调用
一组动画

       @keyframes 动画名称 {
            from{
            }
            to{
            }


        }

        多组动画
        @keyframes 动画名称 {
                0%{}
                10%{}
                50%{}
                100%{}
        }



    @keyframes move {
        from{
            tranform:translateX(0);
        }
        to{
            transform:translateX(400px);
        }
    }

关键属性

动画序列的名称
animation-name: move;
单次动画的持续时间
animation-duration: 1s;
动画的延时
animation-delay: 1s;
运动曲线
animation-timing-function: linear(匀速);steps(步数)让动画分步执行
动画执行次数
animation-iteration-count: 1;
动画播放完结后的状态
animation-fill-mode: forwards(结束后的状态)、backwards(结束后保持开始状态);
动画的执行方向
animation-direction: alternate;

例:animation: move 3s linear 4s infinite forwards alternate;

注:本人文章均属个人笔记。
笔记内容与github同步，都有demo；https://github.com/Big-stone