twoyoung-Daily-train
/
右侧淡入滑进demo.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .demo{
            width: 100%;
            height: 900px;
            top:0;
            left: 0;
            background: #e4b9b9;
            -webkit-animation:fadeInRightBig 1s .2s ease both;
            -moz-animation:fadeInRightBig 1s .2s ease both;
        }

        @-webkit-keyframes fadeInRightBig{
            0%{opacity:0;
                -webkit-transform:translateX(2000px)}
            100%{opacity:1;
                -webkit-transform:translateX(0)}
        }
        @-moz-keyframes fadeInRightBig{
            0%{opacity:0;
                -moz-transform:translateX(2000px)}
            100%{opacity:1;
                -moz-transform:translateX(0)}
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>