注目キーワード
  1. Wordpress
  2. テーマ
  3. プラグイン
  4. SEO
  5. 集客

独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシート・「transition.css」


transition.css


transition.cssは独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシートです。

CDNも用意されていますが、配布サイトで数値を調整してコードをコピーする事も出来るので1つのプロジェクトで複数のエフェクトを使わないのであればCSSそのものを読み込む必要はありません。

遷移のスタイルは円型、ワイプ、四角型、ポリゴンなどに分けられており、各種にいくつか異なるエフェクトが用意されています。

以下、動作サンプルです。

Ads

右下にあるrerunを押せば動作を確認できます。

サンプルではポリゴンのin:diamond:hesitateを利用してみました。以下のコードが提供されます。

@keyframes diamond-in-hesitate { 0% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); } 50% { clip-path: polygon(45% 50%, 50% 25%, 55% 50%, 50% 75%); } 100% { clip-path: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%); } } [transition-style="in:diamond:hesitate"] { animation: 1.5s cubic-bezier(0.25, 1, 0.3, 1) diamond-in-hesitate both; }

このアニメーション遷移エフェクトを付与したいHTML要素に、オリジナルの属性を与えます。

<div transition-style="in:diamond:hesitate"> <h1>foo bar</h1> </div>

あとは遷移前と遷移後のスタイルを整えれば見栄えの良いエフェクトになるんじゃないでしょうか。

GithubではCSS変数を使ったカスタマイズ法も書かれているので興味のある方はチェックしてみてくださいね。

transition.css

#wordpress #ワードプレス #SEO #集客

「かちびと.net」を閲覧する

最新情報をチェックしよう!
>WordPressに関連する情報まとめ

WordPressに関連する情報まとめ

ブログ / ホームページの価値の最大化をさせるCMS、WordPress(ワードプレス)。フリーのブログとは違い、いくらか敷居の高い印象がありますが、一つ一つクリアにしてみるときっとあなたもWordPressのパワーの恩恵に預かれると思います。当サイトを見て、まずはトライしてみましょう!

CTR IMG