4

いくつかのアニメーションで遊んでいますが、まったく機能しません。バウンス アニメーションである必要があります。これを使用するのは初めてです。だから私は非常に悪い間違いをしないことを願っています

これは私の.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);}
}

誰かが私を助けてくれることを願っています！ありがとう！

4

3 に答える 3

7

ブラウザをサポートするには、プレフィックスを追加する必要があります。

キーフレーム 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 */

SCSSやLESSなどのCSS コンパイラを使用している場合は、上記の mixin を作成できます。

@mixin animate($val){
    animation:$val;
    -moz-animation:$val;  
    -webkit-animation:$val;
    -o-animation:$val;
    -ms-animation:$val;  
}
于 2013-11-08T13:45:35.223 に答える