A collection of CSS animations/transitions I may use

some_complex_but_useful_css_transitions.css

// 1. Text color hover animation (from left to right)

.have-some-text {
  /* So far only Chrome webkit browsers can do this.. but this can work for other major browsers too!*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-image: linear-gradient(to right, your-secondary-color,
          your-secondary-color 50%, your-primary-color 50%);
  background-size: 200% 100%;
  background-position: 100%;
}

/* later on, when you hover...(can work for active or focus too) */

.have-some-text:hover {
  // you can set timings and easing values here
  transition: all 0.6s cubic-bezier(0.000, 0.000, 0.230, 1);
  background-position: 0%;
}

// 2. Underline Color Hover animation (left to right)
.some-hyperlink-text {
  transform: perspective(1px) translateZ(0);  
  position: relative;
  transition-property: color;
  transition-duration: 0.6s;
}

.some-hyperlink-text:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #0e0e0e;
  height: 2px;
  transition-property: right;
  transition-duration: 0.6s;
  transition-timing-function: ease-out;
}

.some-hyperlink-text:hover:before {
  right: 0;
  transform: scaleX(1);
}

/* Centering font icons horizontally and vertically */
.login-icon{
    display:inline-block;
    font-size: 40px;
    line-height: 50px;
    background-color:black;
    color:white;
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: bottom;
}