画像が転がるアニメーション、画像の回転[transform: rotate]

スピードが変わる、転がるアニメーション。

ダルマを動かす要望があったので、転がるアニメーションを付与。

動きが単調だとチープに見えるので、動きに緩急をつけて、起き上がりこぶし風に。

完成版コード

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

解説

h2 に :before で表示しているダルマを動かしています。

さかさまのあたりで減速するようにしています。

CSS

TOP_animation:before

  • content: “”; = 疑似要素(:before :after)を使う時は必須。本来は「”」の間にテキストを入力して使う。今回はテキストが不要なので入力なし。
  • background-image: url(画像URL); = 背景画像を挿入するプロパティ。Wordpress で自サイトのメディアを使う場合、URLは「/wp-content/~」からの記載でOK(移転などでドメインが変わっても融通が利く)
  • background-size: contain; = 背景画像のサイズの設定。要素の中で画像の全体が見えるようにサイズを調整
  • width & height = 画像が入る要素の高さと横幅。今回は各200px。
  • position: absolute; = 位置を調整する top、left を使用するのに必要。元々の要素のスペースがなくなるので relative; でなく absolute; を採用。
  • top & left = 数値を入力して位置の調整に使用。
  • animation: rotation 3s alternate infinite; = rotation というキーフレームを呼び出す。追加入力の内容は 3s(3秒で変化させる) alternate(往復の動き) infinite(アニメをループさせる)

@keyframes rotation{ } = @keyframes は animation で読み込むアニメーションの動きを決めるセレクタ、rotation は呼び出すときの名前で自分でわかりやすい名前をつけてOK

0%, 5%{ } 45%,50%{ } 95%,100%{ } = 動きの何%の時にどんな表示にするかを決める

  • transfrom: translate(0%) rotate(0deg); = transform は要素を動かす時に使う。translate は X軸 と Y軸 の値を指定して変化する。rotate は角度を調整する(90deg)は90° を意味する。

0%の時にきっちり translate(0%) と rotate(0deg) を記入する事で、iPhone の実機環境でも変な動きになるのを防げる。

css.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。