mirror of
https://github.com/LinkStackOrg/LinkStack.git
synced 2024-12-15 11:38:32 +01:00
199 lines
5.3 KiB
CSS
199 lines
5.3 KiB
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{
|
|||
|
display: inline-block;
|
|||
|
vertical-align: middle;
|
|||
|
-webkit-transform: perspective(1px) translateZ(0);
|
|||
|
transform: perspective(1px) translateZ(0);
|
|||
|
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
|||
|
-webkit-transition-duration: 0.9s;
|
|||
|
transition-duration: 0.9s;
|
|||
|
}
|
|||
|
.button-hover:active,
|
|||
|
.button-hover:focus,
|
|||
|
.button-hover:hover{
|
|||
|
-webkit-transform: scale(1.1);
|
|||
|
transform: scale(1.1);
|
|||
|
-webkit-transition-timing-function: cubic-bezier(0.47, 2.7, 0.31, -0.36);
|
|||
|
transition-timing-function: cubic-bezier(0.47, 2.7, 0.31, -0.36);
|
|||
|
}
|
|||
|
|
|||
|
.credit-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
|
|||
|
}
|
|||
|
.credit-hover:active,
|
|||
|
.credit-hover:focus,
|
|||
|
.credit-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)
|
|||
|
}
|