Css3アニメーション無限ランニングズーム効果

-3

私は助けが必要です。以下のcss3を使って背景画像をアニメーション化したいのですが、私がやろうとしていることです。Css3アニメーション無限ランニングズーム効果

これは機能しません。私が不足しているところで誰でも私を導くことができますか？

div.top { 
 
    width: 100%; 
 
    float: left; 
 
    position: relative; 
 
    background: #000000; 
 
    overflow: hidden; 
 
    height:500px 
 
} 
 

 
div.top:before { 
 
    background: url(https://custom.cvent.com/90FF1E87110A48338D439371A3FD8256/pix/d9a87cea711e4f77bab87dc9242005b3.jpg) no-repeat center 70px; 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 100%; 
 
    opacity: 0.49; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    /*z-index: -1;*/ 
 
    animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -webkit-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -o-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    transform: scale(1, 1) translate(0px, 0px); 
 
    -webkit-transform: scale(1, 1) translate(0px, 0px); 
 
    -moz-transform: scale(1, 1) translate(0px, 0px); 
 
\t -o-transform: scale(1, 1) translate(0px, 0px); 
 
}

<div class="top">Animate background image here</div>

感謝。

出典

2016-09-19 Vikas hatwal

を？ –

'animation'を使うと、あなたのコードにアニメーションが定義されていますが、あなたはそれを共有していません。あなたのアニメーションコードを共有してください。もしそうでなければ、これはofftopicとして閉じられません。 –

デバッグのヘルプを求める質問（** "なぜこのコードは動作しませんか？"）**は、**目的の動作**、特定の問題またはエラー、および**質問自体に再現するのに必要な最短コード**。明確な問題文がない質問は、他の読者にとって有用ではありません。参照：[最小限で完全で検証可能なサンプルの作成方法]（http://stackoverflow.com/help/mcve） –

あなたはあなたがここにそれについての詳細を読むことができ、アニメーションを定義するためにzoomEffect

@keyframes zoomEffect { 
    from {transform: scale(1, 1)} 
    to {transform: scale(2, 2)} 
}

を必要とする： `zoomEffect`が定義されているCSS3 Animations

div.top { 
 
    width: 100%; 
 
    float: left; 
 
    position: relative; 
 
    background: #000000; 
 
    overflow: hidden; 
 
    height: 500px 
 
} 
 
div.top:before { 
 
    background: url(https://custom.cvent.com/90FF1E87110A48338D439371A3FD8256/pix/d9a87cea711e4f77bab87dc9242005b3.jpg) no-repeat center 70px; 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 100%; 
 
    opacity: 0.49; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    /*z-index: -1;*/ 
 
    animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -webkit-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -o-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
} 
 

 
@keyframes zoomEffect { 
 
    from {transform: scale(1, 1)} 
 
    to {transform: scale(2, 2)} 
 
}

<div class="top">Animate background image here</div>

出典

2016-09-19 11:50:37

Css3アニメーション無限ランニングズーム効果

答えて

関連する問題