css 动画效果

从角落或中间动画弹出弹出层

从哪个角落弹出，就改left、right、bottom、top

    <style>
        .div{
            width: 100px;
            height: 100px;
            position: absolute;
            background: #C94E00;
            opacity: 1;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            animation: change 5s;
            -moz-animation: change 5s;    
            -webkit-animation: change 5s;    
            -o-animation: change 5s;
        }
        @keyframes change{
            from {width: 100px;height: 100px;opacity: 1;}
            to {width: 500px;height: 500px;opacity: 0;}
        }
    </style>

<body>
    <div class="div"></div>
</body>