html css中的关键帧动画不起作用答案

【问题标题】：keyframes animation in html css not workinghtml css中的关键帧动画不起作用
【发布时间】：2013-11-20 13:00:48
【问题描述】：

我正在玩一些动画，但它根本不起作用。它必须是一个弹跳动画。这是我第一次使用它。所以我希望我不会犯很严重的错误

这是我的 .html 文件：

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div class="logo"><img src="Header_red.png"/></div>
<div class="intro"><p>some text</p></div>
</body>
</html>

这是我的 .css 文件：

    html{
    background: url(background.jpg) no-repeat center center fixed;
    overflow:hidden;    
}

.logo
{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    animation-delay:1.2s;
    animation-duration:4.8s;
    animation-iteration-count:1;
    animation-fill-mode:both;
    animation-name:logo;    
}


.intro{
        text-align:left;
    margin-left:100px;
    margin-right:auto;
    animation-duration:5.5s;
    animation-iteration-count:1;
    animation-fill-mode:both;
    animation-name:logo;        
}
@keyframes logo {
    0%{transform: 
        translate(000px, 1500px);}
    20%
    {
        transform:translate(000px, 235px);
    }
    25%
    {
        transform:translate(000px, 265px);
    }
    65%
    {
        transform:translate(000px, 265px);
    }
    100%
    {
        transform:translate(000px, -300px);
    }
}


@keyframes intro{

0% {transform:
translate(000px, -400px);}
65% {transform:
translate(000px, -165px);}
100% {transform:
translate(000px, -135px);}
}

我希望有人可以帮助我！谢谢！

【问题讨论】：

标签： html css animation css-animations

【解决方案1】：

您可能必须添加供应商前缀才能使其正常工作。

-moz- 用于火狐

-webkit- 用于基于 webkit 的浏览器（即 Chrome）

-ms- 适用于微软（Internet Explorer）

-o- 用于 Opera

像这样：

.logo{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    /*animation-delay*/
    -webkit-animation-delay:1.2s;
       -moz-animation-delay:1.2s;
        -ms-animation-delay:1.2s;
         -o-animation-delay:1.2s;
            animation-delay:1.2s;
    /*animation-duration*/
    -webkit-animation-duration:4.8s;
       -moz-animation-duration:4.8s;
        -ms-animation-duration:4.8s;
         -o-animation-duration:4.8s;
            animation-duration:4.8s;
    /*animation-iteration-count*/
    -webkit-animation-iteration-count:1;
       -moz-animation-iteration-count:1;
        -ms-animation-iteration-count:1;
         -o-animation-iteration-count:1;
            animation-iteration-count:1;
    animation-fill-mode:both;
    /*animation-name*/
    -webkit-animation-name:logo;
       -moz-animation-name:logo;
        -ms-animation-name:logo;
         -o-animation-name:logo;
            animation-name:logo;
}
.intro{
    text-align:left;
    margin-left:100px;
    margin-right:auto;
    /*animation-duration*/
    -webkit-animation-duration:5.5s;
       -moz-animation-duration:5.5s;
        -ms-animation-duration:5.5s;
         -o-animation-duration:5.5s;
            animation-duration:5.5s;
    /*animation-iteration-count*/
    -webkit-animation-iteration-count:1;
       -moz-animation-iteration-count:1;
        -ms-animation-iteration-count:1;
         -o-animation-iteration-count:1;
            animation-iteration-count:1;
    animation-fill-mode:both;
    /*animation-name*/
    -webkit-animation-name:logo;
       -moz-animation-name:logo;
        -ms-animation-name:logo;
         -o-animation-name:logo;
            animation-name:logo;
}

@keyframes logo 
{
    0%{transform: 
        translate(000px, 1500px);}
    20%
    {
        transform:translate(000px, 235px);
    }
    25%
    {
        transform:translate(000px, 265px);
    }
    65%
    {
        transform:translate(000px, 265px);
    }
    100%
    {
        transform:translate(000px, -300px);
    }
}
@-moz-keyframes logo  /* Firefox */
{
    0%{transform: 
        translate(000px, 1500px);}
    20%
    {
        transform:translate(000px, 235px);
    }
    25%
    {
        transform:translate(000px, 265px);
    }
    65%
    {
        transform:translate(000px, 265px);
    }
    100%
    {
        transform:translate(000px, -300px);
    }
}
@-webkit-keyframes logo  /* Safari and Chrome */
{
    0%{transform: 
        translate(000px, 1500px);}
    20%
    {
        transform:translate(000px, 235px);
    }
    25%
    {
        transform:translate(000px, 265px);
    }
    65%
    {
        transform:translate(000px, 265px);
    }
    100%
    {
        transform:translate(000px, -300px);
    }
}
@-o-keyframes logo  /* Opera */
{
    0%{transform: 
        translate(000px, 1500px);}
    20%
    {
        transform:translate(000px, 235px);
    }
    25%
    {
        transform:translate(000px, 265px);
    }
    65%
    {
        transform:translate(000px, 265px);
    }
    100%
    {
        transform:translate(000px, -300px);
    }
}
@-ms-keyframes logo  /* IE */
{
    0%{transform: 
        translate(000px, 1500px);}
    20%
    {
        transform:translate(000px, 235px);
    }
    25%
    {
        transform:translate(000px, 265px);
    }
    65%
    {
        transform:translate(000px, 265px);
    }
    100%
    {
        transform:translate(000px, -300px);
    }
}

@keyframes intro
{
    0% {transform:
          translate(000px, -400px);}
    65% {transform:
          translate(000px, -165px);}
    100% {transform:
          translate(000px, -135px);}
    }
}
@-moz-keyframes intro /* Firefox */
{
    0% {transform:
          translate(000px, -400px);}
    65% {transform:
          translate(000px, -165px);}
    100% {transform:
          translate(000px, -135px);}
    }
}
@-webkit-keyframes intro/* Safari and Chrome */
{
    0% {transform:
          translate(000px, -400px);}
    65% {transform:
          translate(000px, -165px);}
    100% {transform:
          translate(000px, -135px);}
    }
}
@-o-keyframes intro /* Opera */
{
    0% {transform:
          translate(000px, -400px);}
    65% {transform:
          translate(000px, -165px);}
    100% {transform:
          translate(000px, -135px);}
    }
}
@-ms-keyframes intro /* IE */
{
    0% {transform:
          translate(000px, -400px);}
    65% {transform:
          translate(000px, -165px);}
    100% {transform:
          translate(000px, -135px);}
    }
}

【讨论】：

感谢您的回答。将此添加到我的代码中，但仍然不是动画:(
@Drogon 也将供应商前缀添加到关键帧。我要更新我的答案。
你在你的地方测试过吗？如果你说它对你有用，我相信你。但对我来说，这有点戏剧性。原因还是不行……

【解决方案2】：

您需要添加浏览器支持的前缀：

关键帧 CSS

@keyframes logo 
{
    //animate
}
@-moz-keyframes logo  /* Firefox */
{
    //animate
}
@-webkit-keyframes logo  /* Safari and Chrome */
{
    //animate
}
@-o-keyframes logo  /* Opera */
{
    //animate
}
@-ms-keyframes logo  /* IE */
{
    //animate
}

元素 CSS

animation: value;
-moz-animation: value;    /* Firefox */
-webkit-animation: value; /* Safari and Chrome */
-o-animation: value;    /* Opera */
-ms-animation: value;    /* IE */

如果您使用 CSS 编译器，例如 SCSS 或 LESS，您可以为上述内容创建一个 mixin：

@mixin animate($val){
    animation:$val;
    -moz-animation:$val;  
    -webkit-animation:$val;
    -o-animation:$val;
    -ms-animation:$val;  
}

【讨论】：

+1 建议使用编译器。除非我使用 SCSS，否则我不会靠近动画；否则，这是一个可怕的时间！
添加浏览器前缀解决了我的问题。有些元素需要前缀而有些不需要（比如border-radius现在可以在没有前缀的情况下使用），这对我来说很疯狂。
非常感谢！正在努力使用在 codepen（无前缀）中工作的动画，但令人沮丧的是，在 WordPress 网站的“自定义 css”选项卡中使用时无法激活。这解决了它。

【解决方案3】：

transform 本身也需要前缀...

-webkit-transform -moz 变换 -o-变换变换

【讨论】：