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>

- Snorlax

---

为什么不使用CSS动画呢？ - www139

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

- Praveen Kumar Purushothaman

---

@Snorlax 希望这有帮助。哇，我很惊讶你不知道这个。 :) - Praveen Kumar Purushothaman

@ManojKumar 不不，不要说脏话。:P - Praveen Kumar Purushothaman