Continuous CSS transition

Example of how to implement a continuous css transition on hover of an element. This means instead of reversing the transition after hovering as it would happen normally, you continue the transition in a second step to its original state.

by Simon Harte

HTML

<span>some text</span>

SCSS

$size: 40px;

span {
  position: relative;
  display: block;
  background: beige;
  height: $size;
  line-height: $size;
  padding-left: $size / 4;
  padding-right: $size;
  
  &::before,
  &::after {
    content: ' ';
    position: absolute;
    right: $size / 4;
    top: 50%;
    width: $size / 2;
    height: $size / 20;
    background: black;
    transition: visibility 0s .5s, transform .5s;
  }
  
  &::before {
    visibility: visible;
    transform: translateY(-50%) rotate(0deg);
  }
  
  &::after {
    visibility: hidden;
    transform: translateY(-50%) rotate(360deg);
  }
  
  &:hover {
    &::before {
      visibility: hidden;
      transform: translateY(-50%) rotate(180deg);
    }
    
    &::after {
      visibility: visible;
      transform: translateY(-50%) rotate(180deg);
    }
  }
}