CSS翻转动画不起作用

Question

使用 CSS3 透视，我想做一个翻转动画。这是我的代码：

HTML：

<header>
    <div id="h1">
        <h1>Title</h1>
    </div>
</header>

CSS：

header div#h1{
    width: 150px;
    perspective: 150px;
    -webkit-perspective:150px; 
}
header div#h1 h1{
    position: absolute;
    animation: flip 5s infinite;
}


@keyframes flip{
    0%{
        transform: rotate(0);
        -webkit-transform: rotate(0);
    }
    25%{
        transform: rotateX(45deg);
        -webkit-transform: rotateX(45deg);
    }
    50%{
        transform: rotateX(90deg);
        -webkit-transform: rotateX(120deg);
    }
    75%{
        transform: rotateX(120deg);
        -webkit-transform: rotateX(120deg);
    }
    100%{
        transform: rotateX(180);
        -webkit-transform: rotateX(180);
    }
}
/* -webkit- keyframes */

FIDDLE

看起来这个动画应该可以工作，但它没有。

为什么这不起作用？

谢谢。

Answer 1

我添加了一些前缀。请检查这个小提琴。

Fiddle

CSS

header div#h1 h1{
    position: absolute;
    -webkit-animation: flip 5s infinite; /* Safari 4+ */
    -moz-animation:    flip 5s infinite; /* Fx 5+ */
    -o-animation:      flip 5s infinite; /* Opera 12+ */
    animation:         flip 5s infinite; /* IE 10+ */
}

Answer 2

只是一个演示示例http://jsfiddle.net/6zF4X/2/

它并没有一直翻转，因为您的最后一个值是 180 度而不是 360 度。我调整了其他一些度数，但你应该按照你想要的方式调整度数。只需确保第一个是 0，最后一个是 360。此外，最好在整个动画中使用相同的值类型。所以我使用 rotateX(0) 作为 0%，而不是像以前那样使用 rotate(0)。

我在小提琴中改变了一些其他的东西，所以不要完全使用那个小提琴。只需相应地更改您的旋转度数即可。

@keyframes flip{
    0%{
        transform: rotateX(0);
    }
    25%{
        transform: rotateX(80deg);
    }
    50%{
        transform: rotateX(160deg);
    }
    75%{
        transform: rotateX(280deg);
    }
    100%{
        transform: rotateX(360deg);
    }
}