悬停时连续CSS旋转动画，悬停时动画返回0deg

小编典典

悬停时连续CSS旋转动画，悬停时动画返回0deg

css

当您将鼠标悬停在某个元素上时，我会旋转它。悬停时，动画将停止。简单：

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to { 
        -webkit-transform: rotate(360deg);
    }
}

.elem:hover {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

但是，当您将鼠标悬停时，动画会突然停止，恢复为0度。我想重新设置动画位置，但是在语法设计上遇到了一些麻烦。

任何输入都会很棒！

阅读 381

2020-05-16

共1个答案

小编典典

解决方案是在.elem中设置默认值。但是此动画可以与-moz一起正常使用，但尚未在-webkit中实现

它可以在Firefox上正常运行，但不能在Chrome上运行

.elem{

    position: absolute;

    top: 40px;

    left: 40px;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 75px;

    border-color: red blue green orange;

    transition-property: transform;

    transition-duration: 1s;

}

.elem:hover {

    animation-name: rotate;

    animation-duration: 2s;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}



@keyframes rotate {

    from {transform: rotate(0deg);}

    to {transform: rotate(360deg);}

}


<div class="elem"></div>

2020-05-16