html点击后旋转,javascript – CSS动画,点击时切换旋转

对于这么简单的事情,你真的不需要关键帧动画.如果您只是在点击时向您的图标添加一个类,然后将其删除,这将应用您的轮换.

Here is a working plunkr using font awesome and a simple rotation.这只是一个简单的例子,您将需要使用供应商前缀并注意css转换在旧版浏览器中不起作用.

.fa-arrow-down{

transform: rotate(0deg);

transition: transform 1s linear;

}

.fa-arrow-down.open{

transform: rotate(180deg);

transition: transform 1s linear;

}

(function(document){

var div = document.getElementById('container');

var icon = document.getElementById('icon');

var open = false;

div.addEventListener('click', function(){

if(open){

icon.className = 'fa fa-arrow-down';

} else{

icon.className = 'fa fa-arrow-down open';

}

open = !open;

});

})(document);