CSS：自定义转换

Question

有没有办法在CSS 中自定义转换和转换？例如，在这个Jsfiddle中，我想在前2秒，变换110度，然后持续4秒，变换200度。

http://jsfiddle.net/jzhang172/b5zun436/

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
}

<p>CSS question: IS there a way to customize the transform? (i.e., transform box to 110 deg, duration 2 seconds and then transform box another 180 degrees, duration 5 seconds. </p>
    <div class="box"></div>

Answer 1

你需要使用关键帧动画，这就是为什么它被称为关键帧动画，你可以逐帧定义它。

@keyframes myAnimation {
    0%    { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    33.3% { -webkit-transform: rotate(110deg); transform: rotate(110deg); }
    100%  { -webkit-transform: rotate(200deg); transform: rotate(200deg); }
}