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

Question

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

这是我的 .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);}
}

我希望有人能帮助我！谢谢！

score 7 · Accepted Answer

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

关键帧 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;  
}

score 0 · Accepted Answer

0

transform 本身也需要前缀...

-webkit-transform -moz-transform -o-transform 转换

于 2014-11-13T20:14:11.757 回答

score 0 · Accepted Answer

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

-moz- 用于火狐

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

-ms- 用于微软（Internet Explhorror）

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

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

3 回答 3

Related

Reference