如何用jquery 修改CSS3动画的keyframe
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用jquery 修改CSS3动画的keyframe相关的知识，希望对你有一定的参考价值。
.AMO_box_2transform: rotate(22.5deg);animation:donghua 0.5s 1 linear normal;
@keyframes donghua
0% transform:rotate(0deg);
100% transform:rotate(22.5deg);
我需要 用JQ对样式AMO_box_2 和 @keyframes donghua 的rotate角度进行 计算调整，
怎么用jq 修改？
取到某个样式表下所有的keyframes对象:
var getKeyFramse = function(index)
var styleSheet = document.styleSheets[index], keyframesRule = [];
[].slice.call(styleSheet.cssRules).forEach(function(item)
if (item.type === CSSRule.WEBKIT_KEYFRAMES_RULE)
keyframesRule.push( item );
)
return keyframesRule;
如何用jquery或js结束CSS转换？
我想用jquery或js结束我的css转换。我并不是说暂停，我想结束它们，好像它们已经完成了100％。我有css过渡而不是动画。
我使用转换的属性是顶部和左侧，它是位置绝对元素。
答案
您可以简单地将transition属性规则覆盖为none。
#el {
position: relative;
left: 0;
top: 25px;
width: 50px;
height: 50px;
transition: all 5s linear;
background: red;
}
body:hover #el{
left: calc(100vw - 50px);
}
button:active + #el {
transition-property: none;
}
:root,body{margin:0}<button>stop transition</button>
<div id="el"></div>另一答案
你好，你的问题有点模棱两可。
如果您使用转换而不是动画，则可以在同一个css示例中控制它的流程：
transition: background-color .2s linear 0s; /*Standard*/
如果要使用JS中断转换，可以在触发所需的某个操作时将其他Css valor分配给其他类名或属性。
.normal{
transition: background-color .2s linear 0s; /*Standard*/
}
[stop = yes] {
background: black;
}
document.body.addEventListener('mouseover', function(e){
e.stopPropagation();
if(someting you want){
document.queryselector(".normal").setAttribute("stop","yes");
}
else{
document.queryselector(".normal").setAttribute("stop","no");
}
},false);
如果你想要的东西被触发，那么该属性将被设置为no转换，这也会切断正在运行的属性。
另一答案
$('.toggle-animation').click(function(){
$('.element').stop(true).toggleClass('animating');
});.element{
top: 0px;
left: 0px;
width: 100px;
height: 100px;
position:relative;
background: red
}
.animating{
top: 100px;
left: 100px;;
transition: all 5s linear 0s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element"></div>
<button type="button" class="toggle-animation">Click me</button>以上是关于如何用jquery 修改CSS3动画的keyframe的主要内容，如果未能解决你的问题，请参考以下文章