js延迟控制图片动画显示

来源:互联网 发布:架子鼓app软件下载 编辑:程序博客网 时间:2024/06/01 19:49
 <body>   <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ }   @keyframes mymove { from {left:0px;} to {left:200px;} }   @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} }   </style>       <input type="button" id="btn" value="click me" /> <div id="div" style="width:100px; height:100px; background:#ccc; display:none;" </body<script> var oDiv = document.getElementById('div'); var oBtn = document.getElementById('btn'); oBtn.onclick=function(){ setTimeout(function(){ oDiv.style.display = 'block'; },1000); }; </script>