基本ははにわまんさんの記事をどうぞ。
WordPress上で使用するにあたっては以下のページを参考にしました。
サンプル
bounce
![bounce](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
pulse
![pulse](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
shake
![shake](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
swing
![swing](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
wobble
![wobble](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
bounceIn
![bounceIn](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
bounceInLeft
![bounceInLeft](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
bounceInUp
![bounceInUp](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
bounceOutDown
![bounceOutDown](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
bounceOutRight
![bounceOutRight](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
fadeIn
![fadeIn](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
fadeInDownBig
![fadeInDownBig](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
fadeInLeftBig
![fadeInLeftBig](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
fadeInRightBig
![fadeInRightBig](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
fadeInUpBig
![fadeInUpBig](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
fadeOutDown
![fadeOutDown](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
fadeOutLeft
![fadeOutLeft](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
fadeOutRight
![fadeOutRight](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
fadeOutUp
![fadeOutUp](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
flipInX
![flipInX](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
flipOutX
![flipOutX](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
lightSpeedIn
![lightSpeedIn](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
rotateIn
![rotateIn](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
rotateInDownRight
![rotateInDownRight](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
rotateInUpRight
![rotateInUpRight](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
rotateOutDownLeft
![rotateOutDownLeft](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
rotateOutUpLeft
![rotateOutUpLeft](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
hinge
![hinge](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
rollIn
![rollIn](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
slideInDown
![slideInDown](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
slideInRight
![slideInRight](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
slideOutDown
![slideOutDown](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
slideOutRight
![slideOutRight](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
4つのデータ属性
3秒かけてアニメーションを実行
![](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
可視範囲に入って0.5秒後にアニメーションを開始
![](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
可視範囲に入ってさらに100pxスクロールされたらアニメーションを開始
![](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
アニメーションを3回繰り返す
![](https://nagimio.com/wp-content/uploads/2022/08/pome.png)
次回は「スマホ時のドロワーメニューを作る」です。
コメント