これは便利！Animate.cssをSassで使う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。京都の会社でフロントエンドエンジニアなどをしている田路と申します。 このたび、縁あってLIGブログに記事を書かせていただくことになりました。どうぞ、よろしくお願いいたします。 さて、早速ですが今回はAnimate.cssをSassで使用する方法を紹介していきたいと思います。 Animate.cssとは？ Animate.cssは、読み込んでさえいれば、要素にクラスをつけるだけでさまざまなアニメーションを実装してくれるという便利なスタイルシートのライブラリです。 使用方法 まずはこちらからダウンロードしてください。 ファイル名、拡張子をanimate.scssとすることで、partial機能を利用し、簡単にSassでも利用することが可能になります。 animate.css → _animate.scss ただし「3秒かけてアニメーションさせたい」や「アニメーションの開始を遅延さ
[CSS]ボタンにぷるるんとかわいいアニメーションを与えるスタイルシート -Galatin effect
a要素にテキストを配置して実装したシンプルなボタンに、ゼリーのようにぷるるんとさせるアニメーションを与えるスタイルシートを紹介します。 ↓は、デモをアニメーションgifにしてみました。 Gelatin over button effect with Sass HTML HTMLは非常にシンプルです。 <a href="#" class="btn">Click Here</a> <a href="#" class="btn btn-secondary">Click Here</a> CSS スタイルシートは少々長いですが、こぴぺでそのまま利用できます。 Sass版は、Gelatin effectをご覧ください。 a.btn { display: inline-block; margin: 15px 15px 0; padding: .6em 1.1em; font-size: 26px; f
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
