1
\$\begingroup\$

I've make these mixins by using SCSS-Sass. Any hints and tipps concerning improvements are welcomed.

body {
  background-color: #d1d1d1;
}

ul {
  list-style: none;
  color: #ffcd11;
}

.wrap {
  width: 1000px;
  margin: 50px auto;
  padding: 10px 30px;
  background-color: #c5c5c5;
  border-radius: 6px;
}

.clearfix {
  clear: both;
}

li {
  font-weight: 800;
}

h1 {
  font-family: "open sans", verdana, sans-serif;
  color: #c80096;
  font-size: 2.5rem;
}

p, ul {
  font-family: georgia;
  font-size: 1.2rem;
}

a {
  text-decoration: none;
  font-family: "open sans", verdana, sans-serif;
  font-size: 2rem;
  font-weight: 800;
}

h1:hover:nth-of-type(2) {
  opacity: 0.8;
}

h1:hover {
  animation: headlines 1s ease-in 2 alternate;
}

@keyframes headlines {
  0% {
    color: #e8b70c;
    text-shadow:  0px 0px 0 #0c1ae8;
  }
  10% {
    color: #e8b70c;
    text-shadow:  0px 0px 0 #0c1ae8,  10px 10px 0 rgba(12, 26, 232, 0.9);
  }
  20% {
    color: #e8b70c;
    text-shadow:  0px 0px 0 #0c1ae8,  10px 10px 0 rgba(12, 26, 232, 0.9),  20px 20px 0 rgba(12, 26, 232, 0.8);
  }
  30% {
    color: #e8b70c;
    text-shadow:  0px 0px 0 #0c1ae8,  10px 10px 0 rgba(12, 26, 232, 0.9),  20px 20px 0 rgba(12, 26, 232, 0.8),  30px 30px 0 rgba(12, 26, 232, 0.7);
  }
  40% {
    color: #e8b70c;
    text-shadow:  0px 0px 0 #0c1ae8,  10px 10px 0 rgba(12, 26, 232, 0.9),  20px 20px 0 rgba(12, 26, 232, 0.8),  30px 30px 0 rgba(12, 26, 232, 0.7),  40px 40px 0 rgba(12, 26, 232, 0.6);
  }
  50% {
    color: #e8b70c;
    text-shadow:  0px 0px 0 #0c1ae8,  10px 10px 0 rgba(12, 26, 232, 0.9),  20px 20px 0 rgba(12, 26, 232, 0.8),  30px 30px 0 rgba(12, 26, 232, 0.7),  40px 40px 0 rgba(12, 26, 232, 0.6),  50px 50px 0 rgba(12, 26, 232, 0.5);
  }
  60% {
    color: #e8b70c;
    text-shadow:  0px 0px 0 #0c1ae8,  10px 10px 0 rgba(12, 26, 232, 0.9),  20px 20px 0 rgba(12, 26, 232, 0.8),  30px 30px 0 rgba(12, 26, 232, 0.7),  40px 40px 0 rgba(12, 26, 232, 0.6),  50px 50px 0 rgba(12, 26, 232, 0.5),  60px 60px 0 rgba(12, 26, 232, 0.4);
  }
  70% {
    color: #e8b70c;
    text-shadow:  0px 0px 0 #0c1ae8,  10px 10px 0 rgba(12, 26, 232, 0.9),  20px 20px 0 rgba(12, 26, 232, 0.8),  30px 30px 0 rgba(12, 26, 232, 0.7),  40px 40px 0 rgba(12, 26, 232, 0.6),  50px 50px 0 rgba(12, 26, 232, 0.5),  60px 60px 0 rgba(12, 26, 232, 0.4),  70px 70px 0 rgba(12, 26, 232, 0.3);
  }
  80% {
    color: #e8b70c;
    text-shadow:  0px 0px 0 #0c1ae8,  10px 10px 0 rgba(12, 26, 232, 0.9),  20px 20px 0 rgba(12, 26, 232, 0.8),  30px 30px 0 rgba(12, 26, 232, 0.7),  40px 40px 0 rgba(12, 26, 232, 0.6),  50px 50px 0 rgba(12, 26, 232, 0.5),  60px 60px 0 rgba(12, 26, 232, 0.4),  70px 70px 0 rgba(12, 26, 232, 0.3),  80px 80px 0 rgba(12, 26, 232, 0.2);
  }
  90% {
    color: #e8b70c;
    text-shadow:  0px 0px 0 #0c1ae8,  10px 10px 0 rgba(12, 26, 232, 0.9),  20px 20px 0 rgba(12, 26, 232, 0.8),  30px 30px 0 rgba(12, 26, 232, 0.7),  40px 40px 0 rgba(12, 26, 232, 0.6),  50px 50px 0 rgba(12, 26, 232, 0.5),  60px 60px 0 rgba(12, 26, 232, 0.4),  70px 70px 0 rgba(12, 26, 232, 0.3),  80px 80px 0 rgba(12, 26, 232, 0.2),  90px 90px 0 rgba(12, 26, 232, 0.1);
  }
  100% {
    color: #e8b70c;
    text-shadow:  0px 0px 0 #0c1ae8,  10px 10px 0 rgba(12, 26, 232, 0.9),  20px 20px 0 rgba(12, 26, 232, 0.8),  30px 30px 0 rgba(12, 26, 232, 0.7),  40px 40px 0 rgba(12, 26, 232, 0.6),  50px 50px 0 rgba(12, 26, 232, 0.5),  60px 60px 0 rgba(12, 26, 232, 0.4),  70px 70px 0 rgba(12, 26, 232, 0.3),  80px 80px 0 rgba(12, 26, 232, 0.2),  90px 90px 0 rgba(12, 26, 232, 0.1),  100px 100px 0 rgba(12, 26, 232, 0);
  }
}
.effect:hover {
  animation: headlinesWithClass 0.8s ease-in 2 alternate;
}

@keyframes headlinesWithClass {
  0% {
    color: #abab00;
    text-shadow:  0px 0px 0 crimson;
  }
  10% {
    color: #abab00;
    text-shadow:  0px 0px 0 crimson,  -3px 10px 0 rgba(220, 20, 60, 0.9);
  }
  20% {
    color: #abab00;
    text-shadow:  0px 0px 0 crimson,  -3px 10px 0 rgba(220, 20, 60, 0.9),  -6px 20px 0 rgba(220, 20, 60, 0.8);
  }
  30% {
    color: #abab00;
    text-shadow:  0px 0px 0 crimson,  -3px 10px 0 rgba(220, 20, 60, 0.9),  -6px 20px 0 rgba(220, 20, 60, 0.8),  -9px 30px 0 rgba(220, 20, 60, 0.7);
  }
  40% {
    color: #abab00;
    text-shadow:  0px 0px 0 crimson,  -3px 10px 0 rgba(220, 20, 60, 0.9),  -6px 20px 0 rgba(220, 20, 60, 0.8),  -9px 30px 0 rgba(220, 20, 60, 0.7),  -12px 40px 0 rgba(220, 20, 60, 0.6);
  }
  50% {
    color: #abab00;
    text-shadow:  0px 0px 0 crimson,  -3px 10px 0 rgba(220, 20, 60, 0.9),  -6px 20px 0 rgba(220, 20, 60, 0.8),  -9px 30px 0 rgba(220, 20, 60, 0.7),  -12px 40px 0 rgba(220, 20, 60, 0.6),  -15px 50px 0 rgba(220, 20, 60, 0.5);
  }
  60% {
    color: #abab00;
    text-shadow:  0px 0px 0 crimson,  -3px 10px 0 rgba(220, 20, 60, 0.9),  -6px 20px 0 rgba(220, 20, 60, 0.8),  -9px 30px 0 rgba(220, 20, 60, 0.7),  -12px 40px 0 rgba(220, 20, 60, 0.6),  -15px 50px 0 rgba(220, 20, 60, 0.5),  -18px 60px 0 rgba(220, 20, 60, 0.4);
  }
  70% {
    color: #abab00;
    text-shadow:  0px 0px 0 crimson,  -3px 10px 0 rgba(220, 20, 60, 0.9),  -6px 20px 0 rgba(220, 20, 60, 0.8),  -9px 30px 0 rgba(220, 20, 60, 0.7),  -12px 40px 0 rgba(220, 20, 60, 0.6),  -15px 50px 0 rgba(220, 20, 60, 0.5),  -18px 60px 0 rgba(220, 20, 60, 0.4),  -21px 70px 0 rgba(220, 20, 60, 0.3);
  }
  80% {
    color: #abab00;
    text-shadow:  0px 0px 0 crimson,  -3px 10px 0 rgba(220, 20, 60, 0.9),  -6px 20px 0 rgba(220, 20, 60, 0.8),  -9px 30px 0 rgba(220, 20, 60, 0.7),  -12px 40px 0 rgba(220, 20, 60, 0.6),  -15px 50px 0 rgba(220, 20, 60, 0.5),  -18px 60px 0 rgba(220, 20, 60, 0.4),  -21px 70px 0 rgba(220, 20, 60, 0.3),  -24px 80px 0 rgba(220, 20, 60, 0.2);
  }
  90% {
    color: #abab00;
    text-shadow:  0px 0px 0 crimson,  -3px 10px 0 rgba(220, 20, 60, 0.9),  -6px 20px 0 rgba(220, 20, 60, 0.8),  -9px 30px 0 rgba(220, 20, 60, 0.7),  -12px 40px 0 rgba(220, 20, 60, 0.6),  -15px 50px 0 rgba(220, 20, 60, 0.5),  -18px 60px 0 rgba(220, 20, 60, 0.4),  -21px 70px 0 rgba(220, 20, 60, 0.3),  -24px 80px 0 rgba(220, 20, 60, 0.2),  -27px 90px 0 rgba(220, 20, 60, 0.1);
  }
  100% {
    color: #abab00;
    text-shadow:  0px 0px 0 crimson,  -3px 10px 0 rgba(220, 20, 60, 0.9),  -6px 20px 0 rgba(220, 20, 60, 0.8),  -9px 30px 0 rgba(220, 20, 60, 0.7),  -12px 40px 0 rgba(220, 20, 60, 0.6),  -15px 50px 0 rgba(220, 20, 60, 0.5),  -18px 60px 0 rgba(220, 20, 60, 0.4),  -21px 70px 0 rgba(220, 20, 60, 0.3),  -24px 80px 0 rgba(220, 20, 60, 0.2),  -27px 90px 0 rgba(220, 20, 60, 0.1),  -30px 100px 0 rgba(220, 20, 60, 0);
  }
}
p:hover {
  animation: paragraph 5s ease-in 2 alternate;
}

@keyframes paragraph {
  0% {
    color: #0aff4a;
    text-shadow:  0px 0px 0 red;
  }
  10% {
    color: #0aff4a;
    text-shadow:  0px 0px 0 red,  12px 10px 0 rgba(255, 0, 0, 0.9);
  }
  20% {
    color: #0aff4a;
    text-shadow:  0px 0px 0 red,  12px 10px 0 rgba(255, 0, 0, 0.9),  24px 20px 0 rgba(255, 0, 0, 0.8);
  }
  30% {
    color: #0aff4a;
    text-shadow:  0px 0px 0 red,  12px 10px 0 rgba(255, 0, 0, 0.9),  24px 20px 0 rgba(255, 0, 0, 0.8),  36px 30px 0 rgba(255, 0, 0, 0.7);
  }
  40% {
    color: #0aff4a;
    text-shadow:  0px 0px 0 red,  12px 10px 0 rgba(255, 0, 0, 0.9),  24px 20px 0 rgba(255, 0, 0, 0.8),  36px 30px 0 rgba(255, 0, 0, 0.7),  48px 40px 0 rgba(255, 0, 0, 0.6);
  }
  50% {
    color: #0aff4a;
    text-shadow:  0px 0px 0 red,  12px 10px 0 rgba(255, 0, 0, 0.9),  24px 20px 0 rgba(255, 0, 0, 0.8),  36px 30px 0 rgba(255, 0, 0, 0.7),  48px 40px 0 rgba(255, 0, 0, 0.6),  60px 50px 0 rgba(255, 0, 0, 0.5);
  }
  60% {
    color: #0aff4a;
    text-shadow:  0px 0px 0 red,  12px 10px 0 rgba(255, 0, 0, 0.9),  24px 20px 0 rgba(255, 0, 0, 0.8),  36px 30px 0 rgba(255, 0, 0, 0.7),  48px 40px 0 rgba(255, 0, 0, 0.6),  60px 50px 0 rgba(255, 0, 0, 0.5),  72px 60px 0 rgba(255, 0, 0, 0.4);
  }
  70% {
    color: #0aff4a;
    text-shadow:  0px 0px 0 red,  12px 10px 0 rgba(255, 0, 0, 0.9),  24px 20px 0 rgba(255, 0, 0, 0.8),  36px 30px 0 rgba(255, 0, 0, 0.7),  48px 40px 0 rgba(255, 0, 0, 0.6),  60px 50px 0 rgba(255, 0, 0, 0.5),  72px 60px 0 rgba(255, 0, 0, 0.4),  84px 70px 0 rgba(255, 0, 0, 0.3);
  }
  80% {
    color: #0aff4a;
    text-shadow:  0px 0px 0 red,  12px 10px 0 rgba(255, 0, 0, 0.9),  24px 20px 0 rgba(255, 0, 0, 0.8),  36px 30px 0 rgba(255, 0, 0, 0.7),  48px 40px 0 rgba(255, 0, 0, 0.6),  60px 50px 0 rgba(255, 0, 0, 0.5),  72px 60px 0 rgba(255, 0, 0, 0.4),  84px 70px 0 rgba(255, 0, 0, 0.3),  96px 80px 0 rgba(255, 0, 0, 0.2);
  }
  90% {
    color: #0aff4a;
    text-shadow:  0px 0px 0 red,  12px 10px 0 rgba(255, 0, 0, 0.9),  24px 20px 0 rgba(255, 0, 0, 0.8),  36px 30px 0 rgba(255, 0, 0, 0.7),  48px 40px 0 rgba(255, 0, 0, 0.6),  60px 50px 0 rgba(255, 0, 0, 0.5),  72px 60px 0 rgba(255, 0, 0, 0.4),  84px 70px 0 rgba(255, 0, 0, 0.3),  96px 80px 0 rgba(255, 0, 0, 0.2),  108px 90px 0 rgba(255, 0, 0, 0.1);
  }
  100% {
    color: #0aff4a;
    text-shadow:  0px 0px 0 red,  12px 10px 0 rgba(255, 0, 0, 0.9),  24px 20px 0 rgba(255, 0, 0, 0.8),  36px 30px 0 rgba(255, 0, 0, 0.7),  48px 40px 0 rgba(255, 0, 0, 0.6),  60px 50px 0 rgba(255, 0, 0, 0.5),  72px 60px 0 rgba(255, 0, 0, 0.4),  84px 70px 0 rgba(255, 0, 0, 0.3),  96px 80px 0 rgba(255, 0, 0, 0.2),  108px 90px 0 rgba(255, 0, 0, 0.1),  120px 100px 0 rgba(255, 0, 0, 0);
  }
}
ul:hover {
  animation: list 0.6s ease-in 2 alternate;
}

@keyframes list {
  0% {
    color: blue;
    text-shadow:  0px 0px 0 #ffcd11;
  }
  10% {
    color: blue;
    text-shadow:  0px 0px 0 #ffcd11,  0px 10px 0 rgba(255, 205, 17, 0.9);
  }
  20% {
    color: blue;
    text-shadow:  0px 0px 0 #ffcd11,  0px 10px 0 rgba(255, 205, 17, 0.9),  0px 20px 0 rgba(255, 205, 17, 0.8);
  }
  30% {
    color: blue;
    text-shadow:  0px 0px 0 #ffcd11,  0px 10px 0 rgba(255, 205, 17, 0.9),  0px 20px 0 rgba(255, 205, 17, 0.8),  0px 30px 0 rgba(255, 205, 17, 0.7);
  }
  40% {
    color: blue;
    text-shadow:  0px 0px 0 #ffcd11,  0px 10px 0 rgba(255, 205, 17, 0.9),  0px 20px 0 rgba(255, 205, 17, 0.8),  0px 30px 0 rgba(255, 205, 17, 0.7),  0px 40px 0 rgba(255, 205, 17, 0.6);
  }
  50% {
    color: blue;
    text-shadow:  0px 0px 0 #ffcd11,  0px 10px 0 rgba(255, 205, 17, 0.9),  0px 20px 0 rgba(255, 205, 17, 0.8),  0px 30px 0 rgba(255, 205, 17, 0.7),  0px 40px 0 rgba(255, 205, 17, 0.6),  0px 50px 0 rgba(255, 205, 17, 0.5);
  }
  60% {
    color: blue;
    text-shadow:  0px 0px 0 #ffcd11,  0px 10px 0 rgba(255, 205, 17, 0.9),  0px 20px 0 rgba(255, 205, 17, 0.8),  0px 30px 0 rgba(255, 205, 17, 0.7),  0px 40px 0 rgba(255, 205, 17, 0.6),  0px 50px 0 rgba(255, 205, 17, 0.5),  0px 60px 0 rgba(255, 205, 17, 0.4);
  }
  70% {
    color: blue;
    text-shadow:  0px 0px 0 #ffcd11,  0px 10px 0 rgba(255, 205, 17, 0.9),  0px 20px 0 rgba(255, 205, 17, 0.8),  0px 30px 0 rgba(255, 205, 17, 0.7),  0px 40px 0 rgba(255, 205, 17, 0.6),  0px 50px 0 rgba(255, 205, 17, 0.5),  0px 60px 0 rgba(255, 205, 17, 0.4),  0px 70px 0 rgba(255, 205, 17, 0.3);
  }
  80% {
    color: blue;
    text-shadow:  0px 0px 0 #ffcd11,  0px 10px 0 rgba(255, 205, 17, 0.9),  0px 20px 0 rgba(255, 205, 17, 0.8),  0px 30px 0 rgba(255, 205, 17, 0.7),  0px 40px 0 rgba(255, 205, 17, 0.6),  0px 50px 0 rgba(255, 205, 17, 0.5),  0px 60px 0 rgba(255, 205, 17, 0.4),  0px 70px 0 rgba(255, 205, 17, 0.3),  0px 80px 0 rgba(255, 205, 17, 0.2);
  }
  90% {
    color: blue;
    text-shadow:  0px 0px 0 #ffcd11,  0px 10px 0 rgba(255, 205, 17, 0.9),  0px 20px 0 rgba(255, 205, 17, 0.8),  0px 30px 0 rgba(255, 205, 17, 0.7),  0px 40px 0 rgba(255, 205, 17, 0.6),  0px 50px 0 rgba(255, 205, 17, 0.5),  0px 60px 0 rgba(255, 205, 17, 0.4),  0px 70px 0 rgba(255, 205, 17, 0.3),  0px 80px 0 rgba(255, 205, 17, 0.2),  0px 90px 0 rgba(255, 205, 17, 0.1);
  }
  100% {
    color: blue;
    text-shadow:  0px 0px 0 #ffcd11,  0px 10px 0 rgba(255, 205, 17, 0.9),  0px 20px 0 rgba(255, 205, 17, 0.8),  0px 30px 0 rgba(255, 205, 17, 0.7),  0px 40px 0 rgba(255, 205, 17, 0.6),  0px 50px 0 rgba(255, 205, 17, 0.5),  0px 60px 0 rgba(255, 205, 17, 0.4),  0px 70px 0 rgba(255, 205, 17, 0.3),  0px 80px 0 rgba(255, 205, 17, 0.2),  0px 90px 0 rgba(255, 205, 17, 0.1),  0px 100px 0 rgba(255, 205, 17, 0);
  }
}
a:hover {
  animation: hyperlink 3s ease-in 2 alternate;
}

@keyframes hyperlink {
  0% {
    color: blue;
    text-shadow:  0px 0px 0 #23ab78;
  }
  10% {
    color: blue;
    text-shadow:  0px 0px 0 #23ab78,  30px 10px 0 rgba(35, 171, 120, 0.9);
  }
  20% {
    color: blue;
    text-shadow:  0px 0px 0 #23ab78,  30px 10px 0 rgba(35, 171, 120, 0.9),  60px 20px 0 rgba(35, 171, 120, 0.8);
  }
  30% {
    color: blue;
    text-shadow:  0px 0px 0 #23ab78,  30px 10px 0 rgba(35, 171, 120, 0.9),  60px 20px 0 rgba(35, 171, 120, 0.8),  90px 30px 0 rgba(35, 171, 120, 0.7);
  }
  40% {
    color: blue;
    text-shadow:  0px 0px 0 #23ab78,  30px 10px 0 rgba(35, 171, 120, 0.9),  60px 20px 0 rgba(35, 171, 120, 0.8),  90px 30px 0 rgba(35, 171, 120, 0.7),  120px 40px 0 rgba(35, 171, 120, 0.6);
  }
  50% {
    color: blue;
    text-shadow:  0px 0px 0 #23ab78,  30px 10px 0 rgba(35, 171, 120, 0.9),  60px 20px 0 rgba(35, 171, 120, 0.8),  90px 30px 0 rgba(35, 171, 120, 0.7),  120px 40px 0 rgba(35, 171, 120, 0.6),  150px 50px 0 rgba(35, 171, 120, 0.5);
  }
  60% {
    color: blue;
    text-shadow:  0px 0px 0 #23ab78,  30px 10px 0 rgba(35, 171, 120, 0.9),  60px 20px 0 rgba(35, 171, 120, 0.8),  90px 30px 0 rgba(35, 171, 120, 0.7),  120px 40px 0 rgba(35, 171, 120, 0.6),  150px 50px 0 rgba(35, 171, 120, 0.5),  180px 60px 0 rgba(35, 171, 120, 0.4);
  }
  70% {
    color: blue;
    text-shadow:  0px 0px 0 #23ab78,  30px 10px 0 rgba(35, 171, 120, 0.9),  60px 20px 0 rgba(35, 171, 120, 0.8),  90px 30px 0 rgba(35, 171, 120, 0.7),  120px 40px 0 rgba(35, 171, 120, 0.6),  150px 50px 0 rgba(35, 171, 120, 0.5),  180px 60px 0 rgba(35, 171, 120, 0.4),  210px 70px 0 rgba(35, 171, 120, 0.3);
  }
  80% {
    color: blue;
    text-shadow:  0px 0px 0 #23ab78,  30px 10px 0 rgba(35, 171, 120, 0.9),  60px 20px 0 rgba(35, 171, 120, 0.8),  90px 30px 0 rgba(35, 171, 120, 0.7),  120px 40px 0 rgba(35, 171, 120, 0.6),  150px 50px 0 rgba(35, 171, 120, 0.5),  180px 60px 0 rgba(35, 171, 120, 0.4),  210px 70px 0 rgba(35, 171, 120, 0.3),  240px 80px 0 rgba(35, 171, 120, 0.2);
  }
  90% {
    color: blue;
    text-shadow:  0px 0px 0 #23ab78,  30px 10px 0 rgba(35, 171, 120, 0.9),  60px 20px 0 rgba(35, 171, 120, 0.8),  90px 30px 0 rgba(35, 171, 120, 0.7),  120px 40px 0 rgba(35, 171, 120, 0.6),  150px 50px 0 rgba(35, 171, 120, 0.5),  180px 60px 0 rgba(35, 171, 120, 0.4),  210px 70px 0 rgba(35, 171, 120, 0.3),  240px 80px 0 rgba(35, 171, 120, 0.2),  270px 90px 0 rgba(35, 171, 120, 0.1);
  }
  100% {
    color: blue;
    text-shadow:  0px 0px 0 #23ab78,  30px 10px 0 rgba(35, 171, 120, 0.9),  60px 20px 0 rgba(35, 171, 120, 0.8),  90px 30px 0 rgba(35, 171, 120, 0.7),  120px 40px 0 rgba(35, 171, 120, 0.6),  150px 50px 0 rgba(35, 171, 120, 0.5),  180px 60px 0 rgba(35, 171, 120, 0.4),  210px 70px 0 rgba(35, 171, 120, 0.3),  240px 80px 0 rgba(35, 171, 120, 0.2),  270px 90px 0 rgba(35, 171, 120, 0.1),  300px 100px 0 rgba(35, 171, 120, 0);
  }
}
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="wrap">
  <h1>Some big headline</h1>
  <h1>Yet another headline</h1>
  <h1 class="effect">This headline uses a class</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
   <ul>
    <li>LIST ITEM</li>
    <li>LIST ITEM</li>
    <li>LIST ITEM</li>
  </ul>
  <a href="#">Hover me</a>
  <div class="clearfix"></div>
</div>

The uncompiled Sass code:

$medium-grey: #ababab;
$rad: 6px;
$font-stack: 'open sans', verdana, sans-serif;

body {
  background-color: lighten($medium-grey, 15%);
}

ul {
  list-style: none;
  color: #ffcd11;
}

.wrap {
  width: 1000px;
  margin: 50px auto;
  padding: 10px 30px;
  background-color: lighten($medium-grey, 10%);
  border-radius: $rad;
}

.clearfix {
  clear: both;
}

li {
  font-weight: 800;
}

h1 {
  font-family: $font-stack;
  color: rgba(200, 0, 150, 1.0);
  font-size: 2.5rem;
}

p, ul {
  font-family: georgia;
  font-size: 1.2rem;
}

a {
  text-decoration: none;
  font-family: $font-stack;
  font-size: 2rem;
  font-weight: 800;
}

h1:hover:nth-of-type(2) {
  opacity: 0.8;
}

// #### THE MIXIN - START ######################

// Applies a text-shadow animation on an HTML-element.
// ---------------------------------------------------
// @param { String } $htmlElement - Selector > The 
//   HTML-element upon which the animation is attached.
// @param { Number } $factorXtoY - Relation: point on the
//   x-axis to the corresponding point on the y-axis.
// @param { Number } $duration
// @color { Color } $color - Text color
// @shadowColor { Color } $shadowColor
// @name { String } $keyframeName - Must be unique within
//   the document.
// -----------------------------------------------------
@mixin drippingShadowEffect( 
         $htmlElement: 'h1', 
         $factorXtoY: 0.5, 
         $duration: 2, 
         $color: rgb(200, 0, 150), 
         $shadowColor: rgb(0, 150, 200),
         $keyframeName: 'effect'
       ) {

  #{$htmlElement}:hover {
    animation: #{$keyframeName} #{$duration}s ease-in 2 alternate;
  }

  @keyframes #{$keyframeName} {
    $val: '';
    $i: 0;

    @while $i <= 100 {
      #{$i}% { // 10% 20% 30% and so on ...

        @if $i >= 10 { // Start with the 2nd text-shadow on
          $val: $val + unquote(', ');
        }

        $val:
          unquote($val) // Blank || Comma
          #{$i * $factorXtoY}px // x
          #{$i}px // y
          0 // Blur
          rgba($shadowColor, 1 - ($i / 100)); // Shadow-color

        color: $color;
        text-shadow: unquote($val); // Apply the constructed value.
      }

      $i: $i + 10;
    }
  }
}
// #### THE MIXIN - END ######################

// ------- Tinkering with it ...
@include drippingShadowEffect('h1', 1.0, 1, #e8b70c, #0c1ae8, 'headlines');
@include drippingShadowEffect('.effect', -0.3, 0.8, #abab00, crimson, 'headlinesWithClass');
@include drippingShadowEffect('p', 1.2, 5, #0aff4a, #f00, 'paragraph');
@include drippingShadowEffect('ul', 0, 0.6, blue, #ffcd11, 'list');
@include drippingShadowEffect('a', 3, 3, blue, #23ab78, 'hyperlink');
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.