animations.css

/* ************************************************************* */
/* 
/* Use this file to add custom CSS animations.
/* Delete this file if you wish to use the default animations.
/* If you do not want to have animations in your theme,
/* remove or comment them and include this file in your theme.
/* 
/* ************************************************************* */


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Entrance animations
- Button hover animations
- Icon hover animations
- Footer hover animations

*/



/* Entrance animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button-entrance {
    animation-name: popUp;
    animation-duration: 1s;
    animation-fill-mode: both;
    /* Used to start button entrance animation one after another  */
    animation-delay: calc(var(--delay)/10);
  }

@keyframes popUp {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.fadein {
    animation-name: fadein;
    animation-duration: 3s;
    animation-fill-mode: both;
  }

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* Button hover animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* (Also apply to icon) */

.button-hover, .credit-hover, .social-hover{
    display:inline-block;
    -webkit-transform:perspective(1px) translateZ(0);
    transform:perspective(1px) translateZ(0);
    box-shadow:0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration:.3s;
    transition-duration:.3s;
    -webkit-transition-property:transform;
    transition-property:transform
}
.button-hover:active,.credit-hover:active, .social-hover:active, 
.button-hover:focus,.credit-hover:focus, .social-hover:focus, 
.button-hover:hover,.credit-hover:hover, .social-hover:hover{
    -webkit-transform:scale(1.1);
    transform:scale(1.1)
}


/* Icon hover animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.icon-hover{
    display:inline-block;
    -webkit-transform:perspective(1px) translateZ(0);
    transform:perspective(1px) translateZ(0);
    box-shadow:0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration:.3s;
    transition-duration:.3s
}
.icon-hover .hvr-icon{
    -webkit-transform:translateZ(0);
    transform:translateZ(0)
}
.icon-hover:active .hvr-icon,.icon-hover:focus .hvr-icon,.icon-hover:hover .hvr-icon{
    -webkit-animation-name:icon-hover;
    animation-name:icon-hover;
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1
}

@-webkit-keyframes icon-hover{
    16.65%{
        -webkit-transform:translateY(6px);
        transform:translateY(6px)
    }
    33.3%{
        -webkit-transform:translateY(-5px);
        transform:translateY(-5px)
    }
    49.95%{
        -webkit-transform:translateY(4px);
        transform:translateY(4px)
    }
    66.6%{
        -webkit-transform:translateY(-2px);
        transform:translateY(-2px)
    }
    83.25%{
        -webkit-transform:translateY(1px);
        transform:translateY(1px)
    }
    100%{
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
@keyframes icon-hover{
    16.65%{
        -webkit-transform:translateY(6px);
        transform:translateY(6px)
    }
    33.3%{
        -webkit-transform:translateY(-5px);
        transform:translateY(-5px)
    }
    49.95%{
        -webkit-transform:translateY(4px);
        transform:translateY(4px)
    }
    66.6%{
        -webkit-transform:translateY(-2px);
        transform:translateY(-2px)
    }
    83.25%{
        -webkit-transform:translateY(1px);
        transform:translateY(1px)
    }
    100%{
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}


/* Footer hover animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.footer-hover{
    display:inline-block;
    -webkit-transform:perspective(1px) translateZ(0);
    transform:perspective(1px) translateZ(0);
    box-shadow:0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration:.3s;
    transition-duration:.3s;
    -webkit-transition-property:transform;
    transition-property:transform;
    -webkit-transition-timing-function:ease-out;
    transition-timing-function:ease-out
}
.footer-hover:active,.footer-hover:focus,.footer-hover:hover{
    -webkit-transform:translateY(-8px);
    transform:translateY(-8px)
}