CSSでskewを使ったぷるぷるアニメーションのサンプル紹介

Posted on by

CSSのアニメーション機能は、Webデザインにおいて非常に強力なツールです。その中でも、skewプロパティを使用したアニメーションは、視覚的に印象的であり、特に「ぷるぷる」とした動きを表現するのに適しています。この記事では、skewを使ったさまざまなぷるぷるアニメーションのサンプルを紹介し、その実装方法について詳しく解説します。

1. 基本的なぷるぷるアニメーション

まず、基本的なぷるぷるアニメーションの実装方法を見てみましょう。以下のCSSコードは、要素が左右にぷるぷると揺れる効果を与えるものです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ぷるぷるアニメーション</title>
    <style>
        .pulsating {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            animation: pulsate 1s infinite;
        }

        @keyframes pulsate {
            0%, 100% {
                transform: skew(0deg);
            }
            50% {
                transform: skew(10deg);
            }
        }
    </style>
</head>
<body>
    <div class="pulsating"></div>
</body>
</html>

このサンプルでは、@keyframesを使用してtransform: skew()プロパティをアニメーションさせています。0%と100%のキーでは要素が元の形状を保ち、50%のキーで要素が10度傾きます。このシンプルな設定により、要素は左右にぷるぷると揺れるようになります。

2. 複雑なぷるぷるアニメーション

次に、もう少し複雑なアニメーションを見てみましょう。ここでは、skewの角度を変えたり、アニメーションのタイミングを調整することで、より動きのあるぷるぷるアニメーションを実現します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>複雑なぷるぷるアニメーション</title>
    <style>
        .complex-pulsating {
            width: 100px;
            height: 100px;
            background-color: #e74c3c;
            animation: complexPulsate 1.5s infinite ease-in-out;
        }

        @keyframes complexPulsate {
            0% {
                transform: skew(0deg, 0deg);
            }
            25% {
                transform: skew(15deg, -5deg);
            }
            50% {
                transform: skew(-10deg, 10deg);
            }
            75% {
                transform: skew(10deg, -10deg);
            }
            100% {
                transform: skew(0deg, 0deg);
            }
        }
    </style>
</head>
<body>
    <div class="complex-pulsating"></div>
</body>
</html>

この例では、アニメーションの中間に異なる角度のskewを挿入し、複雑な動きを演出しています。また、アニメーションのタイミング関数としてease-in-outを使用することで、動きが自然に見えるようにしています。

3. マウスホバーでぷるぷる

さらに、ユーザーのインタラクションに基づいてアニメーションを発動させることも可能です。例えば、マウスホバー時に要素がぷるぷると揺れるアニメーションを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ホバーでぷるぷる</title>
    <style>
        .hover-pulsating {
            width: 100px;
            height: 100px;
            background-color: #2ecc71;
            transition: transform 0.2s;
        }

        .hover-pulsating:hover {
            animation: hoverPulsate 0.5s infinite;
        }

        @keyframes hoverPulsate {
            0%, 100% {
                transform: skew(0deg);
            }
            50% {
                transform: skew(8deg);
            }
        }
    </style>
</head>
<body>
    <div class="hover-pulsating"></div>
</body>
</html>

このコードでは、.hover-pulsatingクラスの要素に対してホバーすると、hoverPulsateアニメーションが発動します。ホバー時のみアニメーションが発動するため、ユーザーのインタラクションに反応する動きを実現できます。

4. 複数要素の連動アニメーション

最後に、複数の要素が連動してぷるぷる動くアニメーションを見てみましょう。これにより、ページ全体に動きを持たせることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>連動ぷるぷるアニメーション</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
        }

        .linked-pulsating {
            width: 50px;
            height: 50px;
            background-color: #9b59b6;
            animation: linkedPulsate 1s infinite alternate;
        }

        .linked-pulsating:nth-child(odd) {
            animation-delay: 0.5s;
        }

        @keyframes linkedPulsate {
            0%, 100% {
                transform: skew(0deg);
            }
            50% {
                transform: skew(12deg);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="linked-pulsating"></div>
        <div class="linked-pulsating"></div>
        <div class="linked-pulsating"></div>
        <div class="linked-pulsating"></div>
    </div>
</body>
</html>

このサンプルでは、.linked-pulsatingクラスを持つ複数の要素がコンテナ内で連動してアニメーションします。nth-childセレクタを使用して奇数番目の要素にアニメーション遅延を追加することで、各要素が異なるタイミングでぷるぷると動きます。これにより、連続した動きが生まれ、視覚的に非常に魅力的な効果を与えます。

まとめ

この記事では、CSSのskewプロパティを使用したぷるぷるアニメーションのさまざまなサンプルを紹介しました。基本的なぷるぷるアニメーションから、複雑な動きやユーザーのインタラクションに反応するアニメーション、さらには複数要素の連動アニメーションまで、多くの実例を通じて実装方法を詳しく解説しました。これらのサンプルを応用することで、あなたのWebサイトに動きと魅力を加えることができるでしょう。

次に、さらに高度なアニメーションや他のCSSプロパティとの組み合わせについても触れていきますので、ぜひ引き続きお楽しみください。