2D3D动画

---

2d基本布局

div{

width:100px;

height:40px;

background-color:red;

animation:move;     第1步 过渡动画名称 和下面@Key对应

animation-duration:2s;   第3步 过渡进行时间

animation-direction:alternate;/*往返效果*/

animation-iteration-count:3;/*执行次数*/

}

@keyframesmove{       第2步创建过渡动画效果

from{

margin-left:0;

}

to{

margin-left:500px;

}

}

div:hover{

animation-play-state:paused;/*Hold住时动画暂停*/ /**/

}

---

2d3d属性格式

ul{

设置3D

transform-style:preserve-3d;

animation:move    8s   linear    0s      infinite（无限）  normal 不往返;
           动画名称   时间  样式  延时    循环次数              往返 alternate

}

ul:hover{

        opacity:1;    透明度默认1   可以0.5  半透明
                           要注意会跟随父属性里面的背景颜色

        animation-play-state:paused; 
                           当鼠标hold住的时候画面暂停

        transform:scale(1，1)
                           放大

}

ul li:hover{

transform:translateX(-150px)rotateY(90deg)  scale(2,1);
                X移动150距离          Y轴移动90°      横向放大1倍
               

}