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

你的意思是这样的：

＆＃13;

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

＆＃13;

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

＆＃13;

甚至更好：

＆＃13;

.spin {
    width:100px;
    height:100px;
    background:red;
}

.spin:hover {
    transform:rotate(2520deg);
    transition: transform 3s ease-out;
}

＆＃13;

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

＆＃13;

Answer 2

在to中，提供另一个动画：

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
        animation: ease;
    }
}

@keyframes ease {

}

您可能需要在此处理迭代次数。它应该只在7个动画之后发生。所以，我不确定。

Answer 3

你一直都有它。

.spin.animated {
        animation-name: spin;
        animation-duration: 400ms;
        animation-iteration-count: 7;
        animation-timing-function: ease; /* your timing function is where you tell it how to animate */
    }

这里是所有可用电话的列表： http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

Answer 4

您可以使用立方贝塞尔计时功能。

像

这样的东西

cubic-bezier(0.81, 0.95, 0.84, 0.95)

会产生类似于您正在搜索的效果。大部分时间都有线性动画，然后它会慢下来

您可以尝试不同的值，并在此处以图形方式设置

bezier curve tester

旋转7次然后轻松

4 个答案: