css scroll down with down arrow

1<div class="mouse">  
2  <div class="mouse-icon">
3    <span class="mouse-wheel"></span>
4  </div>
5  
6</div>
7<style>
8  .mouse {
9  margin: 50px auto;
10  width: 100px;
11}
12
13.mouse-icon {
14   width: 25px;
15   height: 45px;
16   border: 2px solid white; /*you can change 'white' to a hex color*/
17   border-radius: 15px;
18   cursor: pointer;
19   position: relative;
20   text-align: center;
21}
22.mouse-wheel {
23  height: 6px;
24  margin: 2px auto 0;
25  display: block;
26  width: 3px;
27  background-color: white; /*you can change 'white' to a hex color*/
28  border-radius: 50%;
29  -webkit-animation: 1.6s ease infinite wheel-up-down;
30 -moz-animation: 1.6s ease infinite wheel-up-down;
31  animation: 1.6s ease infinite wheel-up-down;
32}
33@-webkit-keyframes wheel-up-down {
34	0% {
35	    margin-top: 2px;
36	    opacity: 0;
37	}
38	30% {
39	    opacity: 1;
40	}
41	100% {
42	    margin-top: 20px;
43	    opacity: 0;
44	}
45}
46@-moz-keyframes wheel-up-down {
47	0% {
48	    margin-top: 2px;
49	    opacity: 0;
50	}
51	30% {
52	    opacity: 1;
53	}
54	100% {
55	    margin-top: 20px;
56	    opacity: 0;
57	}
58}@keyframes wheel-up-down {
59	0% {
60	    margin-top: 2px;
61	    opacity: 0;
62	}
63	30% {
64	    opacity: 1;
65	}
66	100% {
67	    margin-top: 20px;
68	    opacity: 0;
69	}
70}
71</style>