Rotate 7 times then Ease

问题

Hello I am trying to animate an element so that it spins 7 times then slows down and eases I have the spinning done I just need to ease it. I am using a from and to keyframe to spin it, would I need to do it frame by frame or is there another way?

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

回答1:

You mean like this:

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

Or even better:

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

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

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

回答2:

In the to, give another animation:

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

@keyframes ease {

}

You might need to tackle the iteration count here. It should happen only after the 7 animations. So, I am not sure about that.

回答3:

You have it pretty much all the way there.

.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 */
    }

here is list of all available calls: http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

回答4:

You can do it with a cubic bezier timing function.

Something like

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

will give an effect like the one that you are searching. There is a linear animation most of the time, and then it slows down

You can try different values, and set it graphically, here

bezier curve tester

来源：https://stackoverflow.com/questions/26586662/rotate-7-times-then-ease

标签

css

css-animations