純粋な CSS3 で蝶が羽ばたく様子を再現する例

<div id="蝶">
    <div class="leftSide"></div>
    <div class="body"></div>
    <div class="rightSide"></div>
</div>

体{
            背景: url("./images/bg.jpg") 繰り返しなし;
        }
        ＃蝶{
            幅: 600ピクセル;
            高さ: 500px;
            位置: 相対的;
            変換: スケール(0.35);
            変換スタイル: 3D を保持します。
        }
        .leftSide{
            幅: 267ピクセル;
            高さ: 421px;
            背景: url("./images/leftSide.png") 繰り返しなし;
            位置: 絶対;
            左: 26px;
            上: 40px;
            アニメーション: 左 2 秒無限;
            zインデックス: 9999;
        }
        @keyframes 左 {
            0%{
                変換: rotateY(0deg);
                変換の原点: 右中央;
                パースペクティブ: 201px;

            }
            50%{
                変換: rotateY(70deg);
                変換の原点: 右中央;
                パースペクティブ: 201px;

            }
            100%{
                変換: rotateY(0deg);
                変換の原点: 右中央;
                パースペクティブ: 201px;
            }
        }
        @keyframes 右 {
            0%{
                変換: rotateY(0);
                変換の原点: 左中央;
                パースペクティブ: 201px;

            }
            50%{
                変換: rotateY(-70deg);
                変換の原点: 左中央;
                パースペクティブ: 201px;

            }
            100%{
                変換: rotateY(0);
                変換の原点: 左中央;
                パースペクティブ: 201px;

            }
        }
        。体{
            幅: 152ピクセル;
            高さ: 328px;
            背景: url("./images/body.png") 繰り返しなし;
            位置: 絶対;
            マージン: 自動;
            左: 0;
            右: 0;
            下部: 0;
            上: 0;
            zインデックス: 9999;
        }
        .rightSide{
            幅: 284ピクセル;
            高さ: 460ピクセル;
            背景: url("./images/rightSide.png") 繰り返しなし;
            位置: 絶対;
            右: 26px;
            上: 58px;
            アニメーション: 右 2 秒無限;
            zインデックス: 9999;
        }