web-dev-qa-db-ja.com

CSSの背景位置を右から左にアニメーション化

背景イメージをアニメーション化して、イメージが右から左に表示されるようにしています。背景が配置されているdivコンテナーよりも幅の広い画像を使用しました。最初に、背景は次のとおりです

background: url(../img/zeppelin.png);
background-repeat: no-repeat;
background-position: right;

しかし、ページが読み込まれると、背景がアニメーション化されて、左に配置されます。これは、例えば、取る必要があります。 2秒で、1回だけ実行する必要があります。 （画像は後で左に配置する必要があります）。

マウスイベントや疑似クラスは使いたくない。 CSSのみを使用してアニメーション化する方法はありますか？私は成功せずにキーフレームでソリューションを見つけようとしました。

jqueryhtmlcssbackground-imagebackground-position
9
Maexwell

this tutorial： CSSバックグラウンドアニメーション

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}

html { 
    width: 100%; 
    height: 100%; 
    background-image: url(background.png);
    background-position: 0px 0px;

    animation: animatedBackground 10s linear infinite;
    -moz-animation: animatedBackground 10s linear infinite;
    -webkit-animation: animatedBackground 10s linear infinite;
    -ms-animation: animatedBackground 10s linear infinite;
    -o-animation: animatedBackground 10s linear infinite;
}

ここの例： http://jsfiddle.net/verber/6rAGT/5/

あなたが必要とするものであることを願ってください）

20
Andrii Verbytskyi

作業リンク： http://sagiavinash.com/labs/tests/css_anim/

これは正統なトリックです。

<html>
<head>
<style>
    .img{
      width:1000px;
      height:500px;
      background:url(1.jpg) no-repeat left;
      transition:background-position 1s;
      -ms-transition:background-position 1s;
      -moz-transition:background-position 1s;
      -o-transition:background-position 1s;
      -webkit-transition:background-position 1s;    
      }
</style>
</head>
<body>
    <div class="img"></div>
    <link rel="stylesheet" type="text/css" href="style.css">
</body>
</html>

style.css：

img{
  background-position:right;

ここで何が起こっているかは、最初に<style>に記述されているCSSがレンダリングされます。後で外部スタイルシートは</body>の直前の本文にあります。したがって、style.cssは、のリソースが読み込まれた後に読み込まれます。そのため、CSSの実装にはラグがあり、CSS遷移を適用できます。

JAVASCRIPTもイベントもありません。

1
Sagi_Avinash_Varma

値にはアニメーションと数値を使用する必要があるため、開始から終了までの各位置を計算できます。基本的には：

html {
  background:url(http://gravatar.com/avatar/21ffdef6c07de75379e31a0da98d9543?s=512) no-repeat;
  background-size:10%;/* demo purpose */
  background-position: 100% 0;
  animation: bgmve 2s;
}
@keyframes bgmve {
  to {background-position: 0 0;} /* make it short */
}

[〜＃〜] demo [〜＃〜]

ロード時にアニメーションを起動するには、JavaScriptを介してHTMLにクラスを追加できます。

    onload=function() {
      var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)

    root.setAttribute( "class", "move" );

}

そしてCSSは次のようになります：

html {
  background:url(http://gravatar.com/avatar/21ffdef6c07de75379e31a0da98d9543?s=512) no-repeat;
  background-size:10%;
  background-position: 100% 0;
}
.move {
  animation: bgmve 2s;
}
@keyframes bgmve {
  to {background-position: 0 0;
  }
}
0
G-Cyr