旋转7次然后轻松

Question

你好我试图动画一个元素,使它旋转7次然后减速和缓解我完成旋转我只需要缓解它.我正在使用from和to keyframe来旋转它,我需要逐帧进行还是有另一种方式？

@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;
}

Answer 1

你的意思是这样的:

.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>