Done #2669 @1.5

diff --git a/framework/application/views/helpers/CasestudiesList.php b/framework/application/views/helpers/CasestudiesList.php
index 3c4b068f1ca8cc705e7f37c545fb6eecba99af64..711955ee8ad6296ae61d1df2e61ee450ff4e0b80 100644 (file)
--- a/framework/application/views/helpers/CasestudiesList.php
+++ b/framework/application/views/helpers/CasestudiesList.php
@@ -167,7 +167,7 @@ class Cubedesigners_View_Helper_CasestudiesList extends CubeIT_View_Helper_Abstr
 
         $c = '<div class="img-wrapper" style="'. $hover_style .'">';
         $c.= $image;
-        $c.= '<span class="arrows-animation animating"></span>';
+        $c.= '<div class="arrow-animation"><span class="arrow-animation-arrow"></span></div>';
         $c.= '</div>';
                $c.= '<h2>' . $s->titre . '</h2>';
                //$c.='<h3>' . $s->description . '</h3>';

diff --git a/less/casestudies.less b/less/casestudies.less
index 341d07508670c74b180cc8d266a164fdf6e2f1b2..348876f4adbb447f15ee4ce1bda0cbc521246227 100644 (file)
--- a/less/casestudies.less
+++ b/less/casestudies.less
@@ -80,10 +80,23 @@
 
     a:hover {
 
-      .arrows-animation, .img-wrapper:before {
+      .arrow-animation, .img-wrapper:before {
         opacity: 1;
       }
 
+      .arrow-animation {
+        transition: opacity 0.3s ease-out 0.2s; // Set here so it only occurs on hover
+      }
+
+      .arrow-animation-arrow {
+        animation-name: arrowSlideIn;
+        animation-duration: 0.3s;
+        animation-iteration-count: 1;
+        animation-timing-function: ease-out;
+        animation-delay: 0.3s; // Time to wait until circle element fades in
+        animation-fill-mode: forwards;
+      }
+
       img {
         //filter: blur(2.4px);
         transform: scale(1.2);
@@ -135,10 +148,6 @@
        .blocmargin {
                margin-right: 40px;
        }
-       //    .spacer {
-       //        clear: left;
-       //        height:20px;
-       //    }
 
 }
 
@@ -151,10 +160,12 @@
   text-align: right;
 }
 
-// Animated arrows (>>)
-.arrows-animation {
-  font-size: 66px; // Controls size of animated arrows element
-  border: 2px solid #fff;
+// Animated arrow (>)
+// Actual animations are triggered by hover on parent element so styles are above (a:hover)
+.arrow-animation {
+  font-size: 64px; // Controls size of circle
+  color: #fff;
+  border: 2px solid currentColor;
   width: 1em;
   height: 1em;
   border-radius: 100%;
@@ -165,41 +176,39 @@
   transform: translate(-50%, -50%);
   z-index: 1;
   opacity: 0; // Hidden until hovered
-  transition: opacity 0.2s ease-out;
-
-  &:before, &:after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    width: 0.3em;
-    height: 0.3em;
-    background-size: contain;
-    top: 0.35em;
-    left: 30%;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M319.1 217l-190-190C109 6.8 76 7.1 55.5 27.6s-20.8 53.5-.7 73.7l152.5 152.5L54.8 406.2c-20.2 20.2-19.9 53.2.6 73.7s53.5 20.8 73.7.6l190-190c10.1-10.1 15.1-23.4 15-36.8.1-13.3-4.9-26.6-15-36.7z'/%3E%3C/svg%3E");
-  }
-
-  &:after {
-    margin-left: 0.2em;
-  }
-
-  &:hover, &.animating
-  {
-    &:before, &:after {
-      animation-name: bounceAlpha;
-      animation-duration:1.4s;
-      animation-iteration-count:infinite;
-      animation-timing-function:linear;
-    }
+  transition: none; // Set like this so that transition only takes place on hover-in, not hover-out...
+
+  &-arrow {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    // Using a :before element here so we can do the rotation
+    // transformation and keep it separate from the slide in animation
     &:before {
-      animation-delay:0.2s;
+      content: '';
+      font-size: 18px; // Controls length of arrow lines
+      width: 1em;
+      height: 1em;
+      border-style: solid;
+      border-color: currentColor;
+      border-width: 2px 2px 0 0; // Top and right borders to make arrow when rotated 45deg
+      transform: rotate(45deg);
+      margin-left: -0.5em; // Make sure arrow is centred after rotation (half width, thanks to em scaling)
     }
   }
 }
 
-@keyframes bounceAlpha {
-  0% {opacity: 1; transform: translateX(0) scale(1);}
-  25%{opacity: 0; transform:translateX(0.125em) scale(0.9);}
-  26%{opacity: 0; transform:translateX(-0.125em) scale(0.9);}
-  55% {opacity: 1; transform: translateX(0) scale(1);}
+@keyframes arrowSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateX(-0.2em) scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
 }