我为图像设置了一个 css 动画,如下所示:
<style>
#egg{
height:50px;
z-index: 2;
margin-left:950px;
margin-top: 450px;
position:absolute;
animation-duration: 6.4s;
animation-name: slide;
animation-iteration-count: infinite;
}
@keyframes slide{
0% {
margin-left: 910px;
}
49.99% {
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
filter: FlipH;
-ms-filter: "FlipH";
}
50%{
margin-left: 1250px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
100%{
margin-left:910px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
}
</style>
通常我使用下面的代码来更改元素的 css:
$(element).css('margin-left','+=1000px');
但这对带有动画的元素不再有效。所以我想知道如何将 css 边距更改为附加了动画的元素?
我这样做的原因是当单击按钮时,元素应该显示在屏幕中间以开始动画。但是使用 margin:x% 会损坏动画,所以我需要检测窗口的高度和宽度,从而动态调整边距。
最佳答案
你可以解析当前的整数值,然后添加你想要的:
$(document).ready(function() {
var element = $("#change-margin");
setTimeout(function() {
var current = parseInt(element.css('margin-left'));
element.css('margin-left', 100 + current);
}, 1000);
});
#change-margin {
margin-left: 20px;
width: 50px;
height: 50px;
background-color: #fea;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="change-margin"></div>
关于javascript - 将CSS更改为具有动画的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38815630/