Mouse Scroll Animation

index.html

<div class="thing">
  <span class="mouse">
    <span class="mouse-movement"></span>
  </span>
</div>

Mouse Scroll Animation.markdown

Mouse Scroll Animation

A Pen by Pan Stav Geffen on CodePen.

License.

style.css

@-webkit-keyframes mouse-scroll
  0%
    top: 30%
    opacity: 1

  15%
    top: 50%
    opacity: 1

  50%
    top: 50%
    opacity: 0

  100%
    top: 30%
    opacity: 0

@keyframes mouse-scroll
  0%
    top: 30%
    opacity: 1

  15%
    top: 50%
    opacity: 1

  50%
    top: 50%
    opacity: 0

  100%
    top: 30%
    opacity: 0

body
  background-color: white

.thing
  width: 1em
  height: 1em
  margin: auto
  padding: 2em
  background-color: grey
  
.mouse
  display: block
  position: relative
  width: 16px
  height: 30px
  margin: 0 auto 20px
  border: 2px solid rgba(255,255,255,0.4)
  border-radius: 16px
  text-align: center
  box-sizing: border-box
  
.mouse-movement
  display: block
  position: absolute
  top: 30%
  left: 50%
  width: 4px
  height: 8px
  margin: -4px 0 0 -2px
  border-radius: 4px
  background: rgba(255,255,255,0.4)
  -webkit-animation: mouse-scroll 4s linear infinite
  animation: mouse-scroll 4s linear infinite