marqueeをCSSに代替するには。Serviceを読んで理解し、同意したものとみなします。スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。登録してこのコミュニティに参加するどなたでも質問していただけますどなたでも回答していただけます最もよい回答には賛成票が入り、最上位に上がりますホーム質問タグユーザーmarqueeをCSSに代替するには。1,184件0marqueeタグは廃止されるそうですが、CSSで代替できると聞きました。下記のソースコードにあるような『方向』や『速度』などをCSSに置き換えるには、どのようにしたらいいのでしょうか。票1transitionによる例を下記スニペットに示しておきます。アニメーションの設定を変える時は、必ず一度止めてしまう事で面倒を回避しています。スムーズさは失なわれる事でしょう。marquee(hello);">Fast</button></p>(Webクライアントサイドはこんな物でも色々と考慮しなければならない事があり、しかも状況は日々変わるので、プログラミングの学習が目的でしたらあまり深入りしない方がよいかと思います)追記:上記のmarquee関数は要素を動かす方向を要素のdata-marquee属性で決定します。最初から左に動かすのならHTMLでdata-marquee="left"としておけばよいです。translateX(-100%);として見えない場所へ移動させています。(当初のコードでは手動で移動させる事は考慮していなかったので、判定がいいかげんで移動させられる位置が制限されていました。堅牢なコードに直してあります。個の銅バッジ途中の位置はgetComputedStyle()で取得しているのですね。animationでも同じ手が使えるとは思いますが、結果的にtransformの方がコンパクトに収まりそうです。marqueeタグを使わなくてもできるのですね。参考にさせていただきます。10:55送っていただいたソースコードのmarqueeの初期設定の方向は、"右"ですので、これを"左"に変えるには、どのように書き換えるべきでしょうか。javascriptの部分だけで構いませんので、ご教示いただけませんでしょうか。それぞれ少し変わっていますので注意して下さい。11:29javascriptではなく、CSSに書き加えるのでしたか。詳しく説明いただきまして、ありがとうございました。Animationは、アニメーション一回にかける時間を決めたうえで、n%時間が経過したときにCSSプロパティの値をどうするか、という形で指定を行います。最初は左にはみ出している最後は右にはみ出しているその間を10秒かけてアニメーションさせるといった指定をすることになります。</div></div>横位置をどうやって指定するか、どうやって画面外にはみ出させるかは様々な方法がありますから、ググったり試したりしてみてください。上のサンプルではベンダープレフィックスを一切付けていませんが、ブラウザによっては必要です。策定が勧められていましたが、結局完成しないままに廃止されました。これを解説した日本語の記事もいくつか見つかりますが、現在のChromeではプレフィックス付きでも動きません。web実験小屋プロパティを変更すれば動的に方向や速度を変更できるのではと踏んでいましたが、そんな甘くはなさそうですね。途中で指定を変更すると、最初からその設定だったものとして「開始から累計何秒経ったか」を元に計算されるようです。キーフレームやdirectionを変更すると動きを反転させることができますが、右方向の序盤で方向転換させれば左方向の序盤、つまり右側に瞬間移動します。durationを変えることで(結果的に)アニメーションの速度が変えられますが、その場で速度が変わるわけではなく、最初からそのdurationだったとした時の位置に瞬間移動します。タグの全ての機能が簡単に置き換えられるわけではありません。Animationで頑張るというなら、仕組みをご自身でしっかり理解された方がいいように思います。jquery.marquee.jsというライブラリもあるようです。前述の問題を解決するわけではありませんが、Javascriptから簡単に操作でき、対応していない環境ではJSへのフォールバックもしてくれるようです。個の銅バッジ回答をありがとうございました。アニメーションは便利そうですが、使い方がよく分かりません。ボタンで、方向(keyframesの中のtranslateの+と-を変える)やストップをコントロールできるソースコードを作って見たのですが、方向は"止まっている位置から変わる"のでなく、端から出てきたり、ストップさせる場合も"左端でストップする"という具合で、変です。回答を加筆修正しました。12:21jqueryもいろいろできそうなので、そちらも勉強して見ます。marqueeタグは、需要がないのですかね。|0こんな感じでしょうか。</div></body></html>こちらのサイトを参考にしました。marqueeを再現する方法。廃止予定で非推奨のはずのmarqueeタグがほとんど全ての最新ブラウザで使えるのに対し、サポート状況は、かなりお寒い感じです。(追記と訂正)...と思ったらunaristさんのコメント及び回答の追記部分にあるように仕様策定は中断されていたのですね。animations」(似たようなテキスト移動の効果は一般性のあるCSSアニメーションで実現できるというのをお忘れなく)とありますから、そういうことなんでしょう。(Safariではまだ動きましたが、まぁ、使うべきではないですね。12:33なるほどそういうことだったんですね。12:36回答をありがとうございました。検索して見たのですが、動かなかったり、ボタンでコントロールする方法まで言及されてなかったり、いまいち分かりません。|回答スタック・オーバーフローに参加してくれて、ありがとうございます!質問の回答を共有してください。回答を説明し、自分の検討結果も共有してください。意見を述べること(意見を述べるなら、参照リソース、自分の経験で意見をサポートしてください)さらにサポートが必要な場合このヘルプを参考してください。“回答を投稿”をクリックすることで利用規約、プライバシーポリシー、及びクッキーポリシーに同意したものとみなされます。タグが付いた他の質問を参照するか、自分で質問をする。会を開催します🎉サイトの未翻訳箇所を見つけて、もくもく会で直しましょう関連する質問10CSSのクラスセレクタと属性セレクタの違い0CSSが順番どおりに適用されない01つのページ内に複数のmarquee要素がある場合に、1つのmarquee要素のみをリセットするには0cssのfloatについて0CSSでのtable要素の余白0CSSの表示ずれを直したい。質問のフィードこのRSSフィードを購読するには、このURLをコピーしてRSSリーダーに貼り付けてください。