js结合css3,JS-CSS3

transition: all 0.5s;

/* 旋转基点  支持设置 10px 20px*/

transform-origin: left top; //以左上角为基点

transform: rotate(90deg); //旋转90度

// 动画

transition:all .6s;

//放大

transform:scale(1.2)

//平移

transform:translate(100px,100px);

transform:translate(-50%,-50%)

//旋转

transform:rotate(190deg);

//注意覆盖问题：合并写；顺序：平移 旋转 放大缩小

==================================================

动画：较过渡更能控制细节

-定义动画：from = 0% ;to=100%

@keyframes scale_{

0%{

transform:scale(1);

}

25%{

transform:scale(1.2);

}

50%{

transform:scale(1.2);

}

75%{

transform:scale(1.2);

}

100%{

transform:scale(1);

}

}

-调用动画：

animation:scale_ 2s;

等效于：

animation-name:scale_;

animation-duration:2s;

animation-timing-function:cubic-bezier();//linear\

//步长

steps(N):

animation-delay:1s;//延迟

animation-iteration-count:2;//重复动画次数  //infinite;

animation-direction:alternate;//方向播放

animation-fill0mode:backwards;//返回初始化位置 //forwards:留在结束位置

animation-play-state:paused;//暂停

//不换行

white-space:nowrap;

overflow:hidden;

transtion:all 1s;