Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ここがタイトルだよ</title>
<style>
/*ここにCSSを書くよ*/
</style>
<script>
/*ここにJavascriptを書くよ*/
</script>
</head>
<body>

<div class="scroll"><p>Scroll</p></div>
<style type="text/css">

	.scroll{
		    position: absolute;
		    right: 50px;
		    bottom: 0;
		    width: 30px;
		    height: 133px;
		    -webkit-transition: .8s cubic-bezier(.41,.14,.83,.58) 4.5s;
		    transition: .8s cubic-bezier(.41,.14,.83,.58) 4.5s;
		    will-change: opacity;
	}
	.scroll:after {
	    content: "";
	    display: block;
	    width: 1px;
	    height: 70px;
	    margin: 16px auto 0;
	    -webkit-animation: marquee 1.5s ease 1s infinite normal none;
	    animation: marquee 1.5s ease 1s infinite normal none;
	    background: #000;
	}
@-webkit-keyframes marquee {
    0% {
        height: 0;
        background: #000
    }
    40% {
        height: 70px;
        -webkit-transform: translateY(0)
    }
    100% {
        height: 70px;
        background: #000;
        -webkit-transform: translateY(70px)
    }
}
@keyframes marquee {
    0% {
        height: 0;
        background: #000
    }
    40% {
        height: 70px;
        transform: translateY(0);
        @media all and(-ms-high-contrast:none) {
            transform: translateY(-100px)
        }
    }
    100% {
        height: 70px;
        background: #000;
        transform: translateY(70px);
        @media all and(-ms-high-contrast:none) {
            transform: translateY(-30px)
        }
    }
}
</style>

</body>
</html>