Simple CSS Hover Effect using Sass Loops

index.pug

.main-container
  .first-container.share
    h1 <span id="one">W</span><span>h</span><span>e</span><span>n</span> <span>W</span><span>e</span> <span>T</span><span>a</span><span>l</span><span>k</span>
  .second-container.share
    h1 <span>W</span><span>e</span> <span>M</span><span>o</span><span>v</span><span>e</span>

simple-css-hover-effect-using-sass-loops.markdown

Simple CSS Hover Effect using Sass Loops

Simple little hover animation. Sass loops make staggering animation delays really easy to do...you can get a lot of mileage out of them ;D

A Pen by Charlie Marcotte on CodePen.

License.

style.sass

@import url('https://fonts.googleapis.com/css?family=Saira+Semi+Condensed')
$font: 'Saira Semi Condensed', sans-serif
$font-color: #ffffff
$background: #39393B
$transition: .6s
$font-size: 5vw

@mixin center
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)

body
  background: $background
  font-family: $font
  
.main-container
  +center
  color: $font-color

.first-container, .second-container
  cursor: pointer
  position: relative
  
  h1
    position: relative
    letter-spacing: 2px
    font-size: $font-size
    
.first-container
  margin-bottom: 15px
  
span
  display: inline-block
  position: relative
  margin-right: 5px
  &:after
    content: ''
    position: absolute
    height: 100%
    width: 0
    top: 0
    left: 0
    transition: $transition
    z-index: -5
   
@for $i from 1 through 10
  .share:hover > h1 > span:nth-child(#{$i}):after
    $delay: 100 * $i
    $random: ($i * 5) - 30
    background: white
    width: 100%
    transition: $transition
    transition-delay: $delay + ms
    transform: rotate($random + deg)
  .share:hover > h1 > span:nth-child(#{$i})
    $delayTwo: 110 * $i
    color: $background
    transition-delay: $delayTwo + ms