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

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

Answer 1

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

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

Answer 2

您可能需要添加供应商前缀才能使其正常运行。

-moz-适用于Firefox

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

-ms-适用于microsoft（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);}
    }
}

Answer 3

转换本身也需要前缀......

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

html css中的关键帧动画无法正常工作

3 个答案: