プレビューで以下のマニュアル動画を再生できます。
以下、追加CSSクラスのコードです。コピペか、どこかにメモして使ってください。
※アニメーションの動作確認は必ずプレビュー画面で行ってください。

追加CSSクラスコード:animated infinite bounce

追加CSSクラスコード:animated infinite bounceIn

追加CSSクラスコード : animated infinite flash

追加CSSクラスコード : animated infinite pulse

追加CSSクラスコード : animated infinite rubberBand

追加CSSクラスコード : animated infinite shake

追加CSSクラスコード:animated infinite headShake
文字にも適用可能
※コードは、infinite(無限に再生) を省略すると、一回だけアニメーションを行う仕様に変更可能。
その他の設定
追加CSSクラス | アニメーション速度 |
---|---|
slow | 2 秒 |
slower | 3 秒 |
fast | 800 ミリ秒 |
faster | 50 ミリ秒 |
追加CSSクラス | 開始遅延時間 |
---|---|
delay-1s | 1 秒後 |
delay-2s | 2 秒後 |
delay-3s | 3 秒後 |
delay-4s | 4 秒後 |
delay-5s | 5 秒後 |
コードの最後に、上記のクラス名を追加することで、アニメーションの速さ・開始時間の調整が出来ます。それぞれ併用可。
例)


以下再利用ブロックで導入可能なhtml
口コミ風1(アイコン画像あり)
※アイコン画像は1:1のものでないとゆがむので注意。

年齢:40代 / 職業:OL

口コミ風2(★)

ここに文章を入力(黄色★の数を変更したいときは↑のwidth:93%の数字を変更してください)
口コミ風3(twitter)
※アイコン画像は1:1のものでないとゆがむので注意。






line画面風
※アイコン画像は1:1のものでないとゆがむので注意。



0:30

0:30
記事内コメント風
※アイコン画像は1:1のものでないとゆがむので注意。
投稿コメント一覧





左右吹き出し
※アイコン画像は1:1のものでないとゆがむので注意。


著者
この記事を書いた人

- ここに文章を入力
- ここに文章を入力
- ここに文章を入力
ここに文章