Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .container{
            width: 200px;
            height: 200px;
            margin:50px auto 0px;
            border:1px solid #ccc;
            box-shadow: 2px 2px  1px #ccc;
            border-radius: 4px;
            position: relative;
        }

        .animated {
            background-color: lightblue;
            position: absolute;
            width: inherit;
            height: inherit;
            text-align: center;
            animation:open-down-right-out 1s 3;
        }

        @keyframes  open-down-right-out{
            0%{
                -webkit-transform-origin:bottom right;
                -moz-transform-origin:bottom right;
                -ms-transform-origin:bottom right;
                -o-transform-origin:bottom right;
                transform-origin:bottom right;

                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);

                opacity: 1;
            }

            100%{
                -webkit-transform: rotate(110deg);
                -moz-transform: rotate(110deg);
                -ms-transform: rotate(110deg);
                -o-transform: rotate(110deg);
                transform: rotate(110deg);

                opacity: 0;

                -webkit-transform-origin:bottom right;
                -moz-transform-origin:bottom right;
                -ms-transform-origin:bottom right;
                -o-transform-origin:bottom right;
                transform-origin:bottom right;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="animated">
            This is Text!
        </div>
    </div>
</body>
</html>