回答編集履歴
1
余計な部分を削除して、文法を修正しました。
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
例えば、`background-image`のある要素
|
|
5
|
+
例えば、`background-image`のある要素を左から右にアニメーションさせたいのであれば、以下のようなHTMLを用意します。
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
<section class="topImg">
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
<div class="image"></div>
|
|
14
14
|
|
|
15
15
|
</section>
|
|
16
16
|
|
|
@@ -76,11 +76,11 @@
|
|
|
76
76
|
|
|
77
77
|
|
|
78
78
|
|
|
79
|
-
`.image`の幅を`110%`に
|
|
79
|
+
`.image`の幅を`110%`にして、移動しても後ろ側が見えないようにします。`translateX(9%)`のところを`translateX(10%)`としてしまうと、translateが`.image`の大きさを基準に計算されるため、110%にした幅の10%、つまり11%の移動になり、はみ出してしまうので注意が必要です。
|
|
80
80
|
|
|
81
81
|
|
|
82
82
|
|
|
83
|
-
これをクロスフェード
|
|
83
|
+
これをクロスフェードと組み合わせれば、期待している動きになるでしょう。
|
|
84
84
|
|
|
85
85
|
|
|
86
86
|
|
|
@@ -88,8 +88,8 @@
|
|
|
88
88
|
|
|
89
89
|
|
|
90
90
|
|
|
91
|
-
|
|
91
|
+
やりたいことと合っているかわかりませんが、`keyframes`が使えて、ユーザーの操作が関係ないのであれば、CSSだけで画像をアニメーションさせつつ、クロスフェードできます。
|
|
92
92
|
|
|
93
|
-
|
|
93
|
+
こちらにサンプルを用意しました。
|
|
94
94
|
|
|
95
95
|
[https://codepen.io/anon/pen/PQZXqp](https://codepen.io/anon/pen/PQZXqp)
|