Heart animation on Help page

2016/assets/sass/_hearts.scss

@@ -0,0 +1,52 @@
+.hearts {
+  white-space: nowrap;
+  position: relative;
+  display: inline-block;
+
+  .fa {
+    position: absolute;
+    left: 5%;
+    bottom: 50%;
+    color: $colour_red;
+    opacity: 0;
+    @include prefix('animation', 'heart-float 3s infinite');
+    @include prefix('transform-origin', '50% 100%');
+  }
+
+  .fa:nth-child(2){
+    left: 10%;
+    @include prefix('animation-delay', '0.25s');
+  }
+
+  .fa:nth-child(3){
+    left: 80%;
+    @include prefix('animation-delay', '1s');
+  }
+
+  .fa:nth-child(5){
+    left: 60%;
+    bottom: 80%;
+    @include prefix('animation-delay', '1.75s');
+  }
+
+  .fa:nth-child(4){
+    left: 35%;
+    @include prefix('animation-delay', '1.5s');
+  }
+}
+
+@include keyframes(heart-float) {
+  0% {
+    opacity: 1;
+    transform: translate(0, 0) scale(0);
+  }
+
+  3% {
+    transform: translate(0, 0) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(0, -3em) scale(1);
+  }
+}

2016/assets/sass/_mixins.scss

@@ -36,6 +36,21 @@ $prefixes: ("-webkit-","-moz-", "-o-", "-ms-", "");
   }
 }
 
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+    @content;
+  }
+  @-moz-keyframes #{$animationName} {
+    @content;
+  }
+  @-o-keyframes #{$animationName} {
+    @content;
+  }
+  @keyframes #{$animationName} {
+    @content;
+  }
+}
+
 @mixin coloured-links($colour) {
   a {
     color: mix($colour, #fff, 20%);

2016/assets/sass/main.scss

@@ -152,4 +152,5 @@ textarea,
 
 @import 'toc';
 @import 'page-topper';
+@import 'hearts';
 

2016/help.html

@@ -8,7 +8,16 @@
 <div class="section page-topper">
   <h1>How you help</h1>
   <p>Whether you’re a funder, a donor, a volunteer or someone who visits our sites, we couldn’t do it without you.</p>
-  <h2>We want to give you a great big, heartfelt ‘thank you’.</h2>
+  <h2>We want to give you a great big, heartfelt
+    <span class="hearts">
+      <i class="fa fa-heart" aria-hidden="true"></i>
+      <i class="fa fa-heart" aria-hidden="true"></i>
+      <i class="fa fa-heart" aria-hidden="true"></i>
+      <i class="fa fa-heart" aria-hidden="true"></i>
+      <i class="fa fa-heart" aria-hidden="true"></i>
+      ‘thank you.’
+    </span>
+  </h2>
 </div>
 
 <div class="section">