CSS翻转动画不工作 [英] CSS flipping animation not working

问题描述

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

HTML：

 < header& 
< div id =h1> 
< h1>标题< / h1> 
< / div> 
< / header> 
  

CSS：

  header div＃h1 {
 width：150px; 
透视：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

这个动画为什么不工作？

谢谢。

解决方案

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

小提琴

CSS

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

using CSS3 perspective, I would like to make a flipping animation. Here is my code:

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

It seems like this animation should work, but it doesn't.

Why is this not working?

Thank you.

解决方案

I added some prefixes. Please check this fiddle.

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

这篇关于CSS翻转动画不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！