Rotate Out Down Left Animation Effect ด้วย CSS

สร้างเอฟเฟกต์ Animation หมุนออกไปทางซ้ายล่าง (Rotate Out Down Left) ด้วย CSS Keyframes

ตัวอย่าง

<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 rotateOutDownLeft {
            0% {
                -webkit-transform-origin: left bottom;
                -webkit-transform: rotate(0);
                opacity: 1;
            }
            100% {
                -webkit-transform-origin: left bottom;
                -webkit-transform: rotate(90deg);
                opacity: 0;
            }
        }
        @keyframes rotateOutDownLeft {
            0% {
                transform-origin: left bottom;
                transform: rotate(0);
                opacity: 1;
            }
            100% {
                transform-origin: left bottom;
                transform: rotate(90deg);
                opacity: 0;
            }
        }
        .rotateOutDownLeft {
            -webkit-animation-name: rotateOutDownLeft;
            animation-name: rotateOutDownLeft;
        }
    </style>
</head>
<body>
    <div id="animated-example" class="animated rotateOutDownLeft"></div>
    <button onclick="myFunction()">Reload page</button>
    <script>
        function myFunction() { location.reload(); }
    </script>
</body>
</html>

หลักการ: ใช้ transform-origin: left bottom เป็นจุดหมุน หมุนจาก 0 ถึง 90 องศา พร้อม Fade out (opacity 1 → 0)