ピコピコ

実装サンプル

1. 矢印

2. 画像

実装手順など解説

常時発動します。ホバーで止まります。
cssアニメーションはblock要素（or inline-block）でないと効かない。
cssアニメーションでtraslateを変化させている。静(0)→動(50)→静(100)のようにアニメーションを書く。
infiniteを指定することで延々と動く。
ホバーしたときanimation-play-state: paused;が効いて、止まる。

動作環境

○:動作する
△:動作するが意図せぬ挙動
☓:動作しない

-	Mac			Windows11				SP
ブラウザ	Chrome	Firefox	Safari	Chrome	Firefox	Edge	IE	Safari on iOS	Chrome for Android
対応	○	○	○			○	○	○

メッセージ

↑

2025-1-5

わぁ。。素敵なアニメーショ…

20
2022-9-15

おっ、トレーナー！今日もお…

19
2022-9-4

トレーナーさん、今日もはり…

14
2022-8-29

最近、トレーナーが全然更新…

30
2022-5-5

あ、トレーナーさん！こんに…

22
2022-4-10

昨日はずいぶん暖かい日和だ…

25
2022-4-3

今日は久しぶりにアニメが増…

21
2022-3-21

やぁ、はじめましてかな。ト…

28
2022-3-10

あれ…今週は特にアニメが増…

27
2022-3-2

今日の更新はホバーアニメや…

13
2022-2-24

今週は水曜祝日だったから1…

10
2022-2-20

こんにちは！

20
2022-2-15

先週は世話になったな、オグ…

21
2022-2-11

聞いてくれ、タマ。

10
2022-2-3

やぁタマ。今回は何が更新さ…

13

トレセン学園