css - 旋转7次然后缓和

您好，我正在尝试为元素设置动画，使其旋转7次，然后放慢速度并减轻旋转速度，我只需要放松一下即可。我正在使用从关键帧到关键帧旋转它，我是否需要一帧一帧地进行操作，还是有另一种方法？

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.spin.animated {
    animation-name: spin;
    animation-duration: 400ms;
    animation-iteration-count: 7;
    animation-timing-function: linear;
}

最佳答案

您的意思是这样的：

.spin {
    width:100px;
    height:100px;
    background:red;
}
@-webkit-keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(2520deg);
    }
}
.spin.animated {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 2800ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
}

<div class="spin animated"></div>

甚至更好：

.spin {
    width:100px;
    height:100px;
    background:red;
}

.spin:hover {
    transform:rotate(2520deg);
    transition: transform 3s ease-out;
}

<div class="spin"></div>

关于css - 旋转7次然后缓和，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26586662/