おしえて

CSS:animation開始位置の設定

締切済

質問者：apricot1101
質問日時：2021/07/06 15:07
回答数：2件

画面いっぱいに横長の写真を左にスライドさせるアニメーションを作っています。
現在以下のようにCSSで設定し、読み込み時5秒待ってから写真を左にスライドさせるアニメーションが表示されています。ただ、5秒まってからアニメーション開始の際、開始する写真の位置が移動してから動き始めています。

.banner {
background: url(../images/banner.jpg) no-repeat center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
position: relative;
background-repeat: repeat-x;
animation: slideleft 20000s 5s infinite linear;
-webkit-animation: slideleft 20000s 5s infinite linear;
z-index: 0;
}

これを読み込み時の写真の位置から自然にアニメーションを開始させたいのですが、どのように設定したらよいでしょうか。

background: url(../images/banner.jpg) no-repeat center;
を
background: url(../images/banner.jpg) no-repeat left;
にしたら最初に左端から表示されそのままアニメーションを始めることができました。

こちらでいいかなと思いますが、念の為少しだけアニメーション開始をcenterからできるか待てたらと思います。どうぞよろしくお願いいたします。

補足日時：2021/07/06 16:50
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2021/07/06 23:04

こんばんは

質問者様は十分な情報を提示したつもりなのでしょうけれど、どのような仕組みにしているのかほとんどわかりません。
まぁ、1サイクル5時間以上もかかるようなアニメーションに、そもそも意味があるのかどうかも疑問ですけれど・・・

＞にしたら最初に左端から表示されそのまま
＞アニメーションを始めることができました。
ということは、説明の図と実際の内容が違っているのではないでしょうか。
あるいは、keyframeのスタートで最初の設定とは異なる設定を行っているとか。

以下は、まったくの推測ですけれど、（多分）translateで移動しているのではないと思いますので、アニメーションの方法ををtranslateに変えれば初期表示の状態からアニメーションを開始できるのではないでしょうか？

※ サイズ指定等はテキトーです。
※ 繰り返しになっているけれど、不連続部分をどうしたいのかも不明なので、そのままスタートへJUMPします。
※ ほとんど情報がないので、全体的に当たるも八卦ですけれど・・・

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style>
#banner_wrap {
width: 200px; height:200px;
overflow: hidden;
border : 2px solid red;
}
.banner {
width: 400px; height: 100px;
margin-top : 50px; margin-left: -25%;
background: url(../images/banner.jpg) no-repeat center;
background-size: cover;
animation: slideleft 20000s 5s infinite linear;
}
@keyframes slideleft {
from { transform: translateX(0%); }
to { transform: translateX(-25%); }
}
</style>
</head>
<body>
<div id="banner_wrap">
<div class="banner"></div>
</div>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

以下のように動かしていました。
おっしゃる通り、「background: url(../images/banner.jpg) no-repeat left;」にすると、図で表した問題が解消され、左からスムーズにアニメーションが始まったのでその方法で進めたいと思います。
細やかにご対応頂きありがとうございました。

@keyframes slideleft {
from {
background-position: 0%;
}
to {
background-position: 90000%;
}
}
@-webkit-keyframes slideleft {
from {
background-position: 0%;
}
to {
background-position: 90000%;
}
}