Material Box anim

by Vince Richter

HTML

<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>
            Material Design anouncement
        </title>
        <style>
            .a-placement {
                position: fixed;
                font-size: 50px;
                color: red;
                cursor: pointer;
                bottom: 10px;
                left: 10px;
                z-index: 1;
            }

            .a-box {
                position: fixed;
                border-radius: 5px;
                padding: 0;
                bottom: 0;
                left: 0;
                height: 0;
                width: 0;
                background: rgb(212, 212, 212);
                transform: rotate(90deg);
                transition: 0.5s;
                opacity: 0;
                z-index: 3;
            }

            #closeback {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
         ...