CSS3 animation 和 transition 的问题
animation是动画 他可以设置百分比的样式 transition 只能设置0% 和100% 的样式 我怎么让 transition 也可以设置改变中途的样式呢 而且怎么让animation的动画像transition 一样控制他的播放 就是我点击一个按钮他才播放 而且不刷新的情况下多次点击就多次播放 animation transition?
[解决办法]
<style>
div{opacity:0;position:absolute;top:50%;left:50%;width:300px;height:150px;margin:-75px 0 0 -150px;}
.over{border:3px solid #eee;background:#e0e0e0;}
.over{
-webkit-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;
-moz-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;
-o-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;
-ms-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;
animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;
}
@-webkit-keyframes animations{
0%{-webkit-transform:scale(0);opacity:0;}
40%{-webkit-transform:scale(1);opacity:1;}
100%{opacity:1;}
}
@-moz-keyframes animations{
0%{-moz-transform:scale(0);opacity:0;}
40%{-moz-transform:scale(1);opacity:1;}
100%{opacity:1;}
}
@-o-keyframes animations{
0%{-o-transform:scale(0);opacity:0;}
40%{-o-transform:scale(1);opacity:1;}
100%{opacity:1;}
}
@-ms-keyframes animations{
0%{-ms-transform:scale(0);opacity:0;}
40%{-ms-transform:scale(1);opacity:1;}
100%{opacity:1;}
}
@keyframes animations{
0%{transform:scale(0);opacity:0;}
40%{transform:scale(1);opacity:1;}
100%{opacity:1;}
}
</style>
<div class="over" id="test" ></div>
<button onclick="fn()" >test</button>
<script>
var div=document.getElementById('test');
function fn(){
div.className='';
setTimeout(function(){
div.className='over';
},50);
}
</script>
