CSS(二)动画

动画方式分两种
常用动画种类四种transform：位置，旋转，大小，透明度，分别对应4个样式(举例),加上过渡就是动画效果了

• opacity:0
• transform：translateX(100px)
• transform：rotate(7deg)
• transform：scale(1)

1 transform transition组合 适用于触发式，比如绑定鼠标进入
此例子是鼠标进入组件由-100px通过2s到达300px,transition可是设置进入方式,比如匀速，先快后慢

.testclass{
	transform:translateX(-100px);
	transition:transform 2s;
}
.testclass:hover{
	transform:translateX(300px);
}

2 animation 自动播放式
animation有一些属性可以配置，例子属性是只播放一次
此例子为组件在5s内由-1200px到达0px，仅播放一次
分两步1组件设置动画显示方式，2绑定的动画效果

.top{
    margin-top:200px;
    flex:1;
    background-color:#aaa;
    animation:topmove 5s;
    animation-iteration-count:1;
}
@keyframes topmove{
    from{transform:translateX(-1200px);}
    to{transform:translateX(0px);}
}

多节点组合动画需要样式:animation-delay:2s 表示延迟2s播放动画
animation-fill-mode:forwards保留最后样式
举例:

.center{
    flex:1;
    background-color:#bbb;
    animation:centermove 2s;
    animation-delay:2s;
    animation-iteration-count:1;
    animation-fill-mode:forwards
}
@keyframes centermove{
    0%{transform:translateX(1200px);opacity:0}
    100%{transform:translateX(0px);opacity:1}
}

js 动态修改 动画规则

var param = 20;
var style = document.styleSheets[0];
style.insertRule("@keyframes rotate_before{from{ transform: translate(0%,0%); }to{ transform: translate(0%,-"+param +"%);}}",9)