我想用@keyframe为div添加一个动画.我基本上已经尝试了我所知道的一切

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.moveUp{background-color:red; width:40px;height:40px;margin:auto;margin-top:3em;}'
var moveUp = document.querySelectorAll('.moveUp')
document.getElementsByTagName('head')[0].appendChild(style)

//Html

<body>
<div class="moveUp"></div>
<script src="script.js"></script>
</body>

我想让div向下移动200像素，它们再次出现

您可以将style.innerHTML更改为以下内容：

style.innerHTML = '.moveUp{background-color:red; width:40px;height:40px;margin:auto;margin-top:3em;animation: moveDown 1s;}@keyframes moveDown{50% {transform: translateY(200px);}100%{transform: translateY(0);}}'

为了更容易阅读：

.moveUp {
background-color: red; 
width: 40px;
height: 40px;
margin: auto;
margin-top: 3em;
animation: moveDown 1s;
}
@keyframes moveDown {
50% {
transform: translateY(200px);
}
100%{
transform: translateY(0);
}
}

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.moveUp{background-color:red; width:40px;height:40px;margin:auto;margin-top:3em;animation: moveDown 1s;}@keyframes moveDown{50% {transform: translateY(200px);}100%{transform: translateY(0);}}'
var moveUp = document.querySelectorAll('.moveUp')
document.getElementsByTagName('head')[0].appendChild(style)

<div class="moveUp"></div>

相关内容

最新更新

热门标签：