CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで実現するFlip In Y（フリップインY）アニメーション効果の実装方法

CSSの@keyframesとtransformプロパティを組み合わせることで、要素がY軸を中心に回転しながら登場する「Flip In Y」アニメーション効果を実装できます。このエフェクトは、3Dの奥行き感（perspective）を使って、要素が縦方向にひっくり返りながらフェードインする動きを作り出します。

実装のポイント

  • perspective(400px): 3D空間の視点距離を指定し、立体感のある回転を実現します。
  • rotateY(): Y軸（縦軸）を基準に要素を回転させます。90度から始めて0度へ戻すことで「ひっくり返る」演出になります。
  • opacity: アニメーションの開始時は透明（0）、終了時は不透明（1）にすることで、滑らかなフェードインと組み合わせています。
  • animation-fill-mode: both: アニメーション開始前後もスタイルを維持し、ちらつきを防ぎます。

サンプルコード

以下のコードをそのままHTMLファイルに保存してブラウザで開くと、Flip In Yアニメーションが確認できます。「Reload page」ボタンをクリックすると、ページを再読み込みしてアニメーションを再生し直せます。

<html>
<head>
<style>
.animated {
background-image: url(/css/images/logo.png);
background-repeat: no-repeat;
background-position: left top;
padding-top: 95px;
margin-bottom: 60px;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}

@keyframes flipInY {
0% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateY(-10deg);
}
70% {
transform: perspective(400px) rotateY(10deg);
}
100% {
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}

.flipInY {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInY;
backface-visibility: visible !important;
animation-name: flipInY;
}
</style>

</head>
<body>

<div id = "animated-example" class = "animated flipInY"></div>
<button onclick = "myFunction()">Reload page</button>

<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>

アニメーションの流れ

  1. 0%: 要素がY軸に対して90度回転した状態（横から見た状態）かつ透明で開始します。
  2. 40%: -10度まで回転し、少し反対側に傾くことで弾むような動きを表現します。
  3. 70%: 今度は+10度に戻り、バネのような揺れを加えます。
  4. 100%: 0度（正面）に収まり、完全に不透明な状態で終了します。

このように中間キーフレームでわずかに逆方向へ回転させることで、単調な回転ではなく、自然でリッチな「バウンド感」のあるアニメーションになります。古いWebKit系ブラウザ向けに-webkit-プレフィックス付きの記述も併記している点が特徴です。

  1. CSSで実現するTada（タダ）アニメーション効果の作り方

    CSSを使えば、要素に「Tada」と呼ばれる揺れるようなアニメーション効果を簡単に追加できます。Tadaアニメーションは、要素が左右に傾きながら拡大・縮小を繰り返すことで、ユーザーの注意を引きつける演出としてよく使われます。ロゴやボタンを目立たせたい場面などに効果的です。以下のコードを実行すると、実際にTadaアニメーションの動作を確認できます。サンプルコード<html>    <head>       <style>          .animated {

  2. CSSで作るスイングアニメーション効果の実装方法

    スイング(Swing)アニメーションは、吊り下げられた要素や軸を中心とした要素を、前後・左右に揺らす動きを表現できるCSSアニメーション効果です。振り子のような自然な揺れを再現でき、ロゴやバナー、アイコンなどに注目を集める演出として活用できます。 スイングアニメーションの仕組み スイングアニメーションは、主に次のCSS機能を組み合わせて実装します。 transform-origin: top center; … 要素の上部中央を回転の基点に設定し、ぶら下がっているように見せる @keyframes と rotate() … 回転角度を15°→ -10°→ 5°→ -5°→ 0°と段階的に変化