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

CSSで実現する「右下を支点に回転しながら消える」アニメーション効果の作り方

CSSのアニメーションを使えば、要素を右下（right bottom）を支点として回転させながらフェードアウトさせる演出が簡単に実装できます。この効果は一般的に rotateOutDownRight と呼ばれ、要素が画面から消える際の退場アニメーションとしてよく活用されます。

rotateOutDownRightアニメーションの仕組み

このアニメーションでは、以下のCSSプロパティが重要な役割を果たします。

  • transform-origin: right bottom; … 回転の基準点を要素の右下に設定します。
  • transform: rotate(-90deg); … 要素を反時計回りに90度回転させます。
  • opacity: 0; … アニメーション終了時に要素を完全に透明にして見えなくします。

開始時点（0%）では不透明度100%・回転0度の状態からスタートし、終了時点（100%）で-90度回転しながら透明になっていくという流れです。

実装コード例

以下のコードを実行すると、ロゴ画像が右下を軸に回転しながら消えていく様子を確認できます。「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: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated rotateOutDownRight"></div>
<button onclick = "myFunction()">Reload page</button>

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

コードのポイント解説

1. ベンダープレフィックスへの対応

サンプルでは -webkit- 付きの記述が含まれています。これは古いSafariやChromeなどのWebKit系ブラウザとの互換性を確保するためです。現在のモダンブラウザでは標準の @keyframes や transform だけで動作しますが、古い環境もサポートする場合は併記しておくと安心です。

2. animation-fill-mode の指定

animation-fill-mode: both; を指定することで、アニメーションの待機中・終了後にもキーフレームの状態が保持されます。これにより、アニメーション終了後に要素が突然元の状態に戻って再表示されることを防げます。

3. アニメーション時間の調整

animation-duration: 10s; ではアニメーションの完了までの時間を指定しています。用途に応じて数値を変更してください。より短く（例：1s～2s）設定すると、スピーディーな演出になります。

まとめ

rotateOutDownRight は、要素を右下の角を支点に回転させて消すシンプルながら印象的な退場エフェクトです。@keyframes で開始と終了の状態を定義し、transform-origin で回転軸を制御するという基本さえ押さえれば、さまざまなWebサイトのUI演出に応用できます。

  1. CSSでrotateOutUpRight（右上へ回転して退場）アニメーションを実装する方法

    CSSを使えば、要素が右下を軸として時計回りに90度回転しながら画面から消えていく「rotateOutUpRight（右上へ回転して退場）」アニメーションを簡単に実装できます。この記事では、@keyframesルールとtransform-originプロパティを組み合わせた具体的な実装例を紹介します。 rotateOutUpRightアニメーションの仕組み このアニメーションは、以下のCSSプロパティを組み合わせて実現します。 transform-origin：回転の軸となる基準点を指定します。ここでは「right bottom（右下）」を指定しています。 transform: rotate

  2. CSSで左上方向へ回転して消えるアニメーション（rotateOutUpLeft）を作る方法

    CSSのrotateOutUpLeftは、要素が左下を軸として反時計回りに回転しながら画面外へ消えていくアニメーション効果です。@keyframesで回転角度と不透明度（opacity）の変化を定義し、animation-nameを使って対象の要素に適用します。 実装例 以下のコードでは、ロゴ画像が10秒かけて左下を基点に-90度回転しながらフェードアウトしていきます。「Reload page」ボタンをクリックするとページが再読み込みされ、アニメーションを何度でも確認できます。 <html> <head> <style> .animated { bac