CSSアニメーション詳細

Animista のCSSアニメーションのメモです。

基本アニメーション (Basics)

Rotate

• rotate-right: 時計回りに回転。

• rotate-left: 反時計回りに回転。

• rotate-diagonal: 対角線方向に回転。

Scale

• scale-up: 拡大。

• scale-down: 縮小。

• scale-center: 中心から拡大縮小。

Translate

• translate-right: 右に移動。

• translate-left: 左に移動。

• translate-up: 上に移動。

• translate-down: 下に移動。

エントランス/エグジット (Entrances and Exits)

Fade

• fade-in: フェードイン。

• fade-out: フェードアウト。

• fade-in-up: 下からフェードイン。

• fade-out-down: 上にフェードアウト。

Slide

• slide-in-right: 右からスライドイン。

• slide-out-left: 左にスライドアウト。

• slide-in-up: 下からスライドイン。

• slide-out-down: 上にスライドアウト。

テキストアニメーション (Text)

Typing

• typing: 文字が順次表示される。

• typing-reverse: 文字が逆順で表示される。

Flicker

• flicker-in: 点滅しながらフェードイン。

• flicker-out: 点滅しながらフェードアウト。

バックグラウンド (Backgrounds)

Gradient

• bg-gradient: グラデーションの変更。

• bg-gradient-top: 上部からのグラデーション。

• bg-gradient-diagonal: 対角線上のグラデーション。

アテンションシーカー (Attention Seekers)

Bounce

• bounce: バウンス効果。

• bounce-in: バウンスしながらフェードイン。

• bounce-out: バウンスしながらフェードアウト。

Shake

• shake-horizontal: 水平にシェイク。

• shake-vertical: 垂直にシェイク。

スペシャル (Specials)

Morphing

• morph: 形状の変化。

• morph-in: 形状変化しながらフェードイン。

• morph-out: 形状変化しながらフェードアウト。

Flip

• flip-horizontal: 水平にフリップ。

• flip-vertical: 垂直にフリップ。

ローディング (Loading)

Spinner

• spinner: 回転するスピナー。

• spinner-grow: 成長するスピナー。

Bar

• loading-bar: 左から右へのローディングバー。

• loading-bar-infinite: 無限ループのローディングバー。

アイコンサプライ (Icons Supply)

Spin

• icon-spin: 回転するアイコン。

• icon-spin-reverse: 逆回転するアイコン。

Flash

• icon-flash: 点滅するアイコン。

その他 (Others)

Custom Animations

カスタムアニメーションは、ユーザーが独自のアニメーションを作成するための高度な設定や技術を提供します。

キーフレーム (Keyframes)

キーフレームは、CSSアニメーションの中心となるもので、特定の時間点におけるアニメーションの状態を定義します。

@keyframes custom-animation {
  0% { transform: translateX(0); }
  50% { transform: translateX(50px); }
  100% { transform: translateX(0); }
}

アニメーションプロパティ (Animation Properties)

.animated-element {
  animation-name: custom-animation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

高度なテクニック

• 複数アニメーションの組み合わせ:

.animated-element {
  animation: slide-in 1s ease-in-out, fade-in 2s ease-in;
}

• JavaScriptとの連携:

const element = document.querySelector('.animated-element');
element.style.animationPlayState = 'paused';
element.addEventListener('mouseover', () => {
  element.style.animationPlayState = 'running';
});
element.addEventListener('mouseout', () => {
  element.style.animationPlayState = 'paused';
});

実際の例

/* キーフレーム定義 */
@keyframes color-change {
  0% { background-color: red; }
  50% { background-color: yellow; }
  100% { background-color: red; }
}

@keyframes move-diagonal {
  0% { transform: translate(0, 0); }
  100% { transform: translate(100px, 100px); }
}

/* アニメーション適用 */
.custom-box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: color-change 3s infinite, move-diagonal 3s infinite;
}

詳細はAnimistaをご覧ください 。