Javascript css3转换从单击开始

我希望在单击后开始CSS3转换

现在，如果元素添加了一个带有jQuery的类（请参见

span.toggle nav.two

），它就可以正常工作了，因为jQuery知道该做什么

我试过使用

：focus

（请参见

span.toggle nav.one

），但这不起作用。如果没有jQuery，我如何使它工作

请看这里：单击两个有效，但单击一个无效

<span class="toggle-nav one">One</span>
<span class="toggle-nav two">Two</span>

<script type="text/javascript">
     $('.toggle-nav.two').on('click',function(){
        $(this).addClass("click");
    });
</script>

<style type="text/css">
.toggle-nav {
    background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8hRiDDs6RJRzelpuFRX2wG5Wx2cQPOBWKYCOmlA2Wr34dx1vv);
    background-repeat:no-repeat;
    width:50px;height:50px;
    display:inline-block;
}
.toggle-nav.one:focus {
    -webkit-animation: spin 0.6s infinite linear;
    -moz-animation: spin 0.6s infinite linear;
    -o-animation: spin 0.6s infinite linear;
    -ms-animation: spin 0.6s infinite linear;
}
.toggle-nav.two.click {
    -webkit-animation: spin 0.6s infinite linear;
    -moz-animation: spin 0.6s infinite linear;
    -o-animation: spin 0.6s infinite linear;
    -ms-animation: spin 0.6s infinite linear;    
}


@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg);}
    100% { -webkit-transform: rotate(180deg);}
}
@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg);}
    100% { -moz-transform: rotate(180deg);}
}
@-o-keyframes spin {
    0% { -o-transform: rotate(0deg);}
    100% { -o-transform: rotate(180deg);}
}
@-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg);}
    100% { -ms-transform: rotate(180deg);}
}
</style>

1
两个
$（'.toggle nav.two'）。打开（'click'，function（）{
$（此）.addClass（“单击”）；
});
.切换导航{
背景图片：url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8hRiDDs6RJRzelpuFRX2wG5Wx2cQPOBWKYCOmlA2Wr34dx1vv);
背景重复：无重复；
宽度：50px；高度：50px；
显示：内联块；
}
.切换导航。一：聚焦{
-webkit动画：旋转0.6s无限线性；
-moz动画：旋转0.6s无限线性；
-o动画：旋转0.6s无限线性；
-ms动画：旋转0.6s无限线性；
}
.toggle-nav.two.点击{
-webkit动画：旋转0.6s无限线性；
-moz动画：旋转0.6s无限线性；
-o动画：旋转0.6s无限线性；
-ms动画：旋转0.6s无限线性；
}
@-webkit关键帧旋转{
0%{-webkit变换：旋转（0度）；}
100%{-webkit变换：旋转（180度）；}
}
@-moz关键帧旋转{
0%{moz变换：旋转（0度）；}
100%{moz变换：旋转（180度）；}
}
@-o-关键帧旋转{
0%{-o变换：旋转（0度）；}
100%{-o变换：旋转（180度）；}
}
@-ms关键帧旋转{
0%{-ms变换：旋转（0度）；}
100%{-ms变换：旋转（180度）；}
}

---

有没有一种方法可以在没有jQuery的情况下实现这一点？

要让

span

获得焦点，需要设置

tabindex

属性：

<span class="toggle-nav one" tabindex="-1">One</span>

1

然后，您可能希望样式也设置CSS大纲属性：

大纲：无

您可以使用纯CSS来实现这一点-在CSS中正确模拟单击事件的唯一方法是使用复选框来伪造它，否则使用
：active
或
：focus
将在元素失去焦点时停止任何应用的转换或动画，而不是在再次单击该元素时

HTML

有没有办法使用tabindex多次使用动画？我改变了从无限到一的转换。如果我再次单击，我可以再次运行动画吗？你可以使用onanimationend事件来模糊元素，但这会调用javascript/jQuery，不确定这是你想要的forKinda，但我认为我最好使用add/remove类。我认为我真的做错了什么，必须有一个简单的方法来打开和关闭动画。这正是我想要的
<div>
    <input id='box' type='checkbox' />
    <label for='box'>Click Me!</label>
</div>

div {
    position:relative;
}
label {
    position:absolute;
    left:0;
    background:white;
}
input[type=checkbox] {
    opacity:0;
}
input[type=checkbox]:checked + label {
    -webkit-animation: spin 0.6s infinite linear;
    -moz-animation: spin 0.6s infinite linear;
    -o-animation: spin 0.6s infinite linear;
    -ms-animation: spin 0.6s infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
    }
}
@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(180deg);
    }
}
@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(180deg);
    }
}
@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(180deg);
    }
}