File: /home/parhudrw/alicreates.com/wp-content/themes/essentials/inc/scss/elements/_animations.scss
.animate-in,
.animating,
.group-animate-in {
-webkit-transition: none !important;
transition: none !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
a {
-webkit-transition: none !important;
transition: none !important;
}
}
.animate-in,
.animate-out,
.group-animate-in {
visibility: hidden !important;
opacity: 0 !important;
will-change: transform, opacity;
&[data-anim-type="highlight-grow"] {
visibility: visible !important;
opacity: 1 !important;
}
}
.animating {
-webkit-animation-duration: 0.5s !important;
animation-duration: 0.5s !important;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both !important;
}
.no-js .animate-in,
.ie .animate-in,
.no-js .group-animate-in,
.ie .group-animate-in {
visibility: visible !important;
opacity: 1 !important;
}
.pix-sliding-headline {
opacity: 0;
&.pix-ready {
opacity: 1;
}
.slide-in-container {
overflow: hidden;
padding-top: 10px;
margin-top: -10px;
padding-bottom: 10px;
margin-bottom: -10px;
}
}
/* #Fade In
// ================================================== */
// Normal
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animating.fade-in {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
// Up
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
.animating.fade-in-up {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
// Up Big
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(120px);
transform: translateY(120px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(120px);
transform: translateY(120px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
.animating.fade-in-up-big {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
will-change: transform, opacity;
}
// Down
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
.animating.fade-in-down {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
// Right
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
.animating.fade-in-right {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
// Right Big
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(120px);
transform: translateX(120px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(120px);
transform: translateX(120px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
.animating.fade-in-right-big {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
// Left
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
.animating.fade-in-left {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
// Left Big
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-120px);
transform: translateX(-120px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-120px);
transform: translateX(-120px);
}
80% { opacity: 1; }
100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
.animating.fade-in-left-big {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInImg {
0% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-filter: brightness(50%);
filter: brightness(50%);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: brightness(100%);
filter: brightness(100%);
}
}
@keyframes fadeInImg {
0% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-filter: brightness(50%);
filter: brightness(50%);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: brightness(100%);
filter: brightness(100%);
}
}
.animating.fade-in-Img {
-webkit-animation: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 fadeInImg;
animation: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s 1 fadeInImg;
}
/* #Slide In
// ================================================== */
// Up
@-webkit-keyframes slideInUp {
0% {
opacity: .2;
-webkit-transform: translateY(200%);
transform: translateY(200%);
}
100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
}
}
@keyframes slideInUp {
0% {
opacity: .2;
-webkit-transform: translateY(200%);
transform: translateY(200%);
}
100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
}
}
.slide-in-container {
overflow-y: hidden;
display: inline-block !important;
// padding: 5px 5px;
// margin: -5px -5px;
padding-right: 5px;
margin-right: -5px;
vertical-align: middle;
position: relative;
span {
// padding: 5px 5px;
// margin: -5px -5px;
}
}
.display-1,
.display-2,
.display-3,
.display-4 {
.slide-in-container {
line-height: 1.3em;
}
}
.animating.slide-in-up {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
// Down
@-webkit-keyframes slideInDown {
0% {
opacity: .2;
-webkit-transform: translateY(-200%);
transform: translateY(-200%);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInDown {
0% {
opacity: .2;
-webkit-transform: translateY(-200%);
transform: translateY(-200%);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
.animating.slide-in-down {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
// ================================================== */
/* #Hover animations
// ================================================== */
.pix-hover-item {
&.pix-hover-left, .pix-hover-left {
-webkit-transition: padding .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: padding .4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
display: inline-block;
padding-left: 0px;
&.pix-slow {
-webkit-transition: padding 0.6s cubic-bezier(0.365, 0.84, 0.44, 1);
transition: padding 0.6s cubic-bezier(0.365, 0.84, 0.44, 1);
}
}
&.pix-hover-right, .pix-hover-right {
-webkit-transition: padding .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: padding .4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
display: inline-block;
padding-left: 0px;
&.pix-slow {
-webkit-transition: padding 0.6s cubic-bezier(0.365, 0.84, 0.44, 1);
transition: padding 0.6s cubic-bezier(0.365, 0.84, 0.44, 1);
}
}
&.pix-img-scale, .pix-img-scale {
-webkit-transition: all 1s cubic-bezier(0.365, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.365, 0.84, 0.44, 1);
-webkit-transform: scale(1);
transform: scale(1);
}
&.pix-slide-up, .pix-slide-up {
-webkit-transition: all 0.4s cubic-bezier(0.365, 0.84, 0.44, 1);
transition: all 0.4s cubic-bezier(0.365, 0.84, 0.44, 1);
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
&.pix-fade-in, .pix-fade-in {
-webkit-transition: all 0.3s cubic-bezier(0.365, 0.84, 0.44, 1);
transition: all 0.3s cubic-bezier(0.365, 0.84, 0.44, 1);
opacity: 0;
}
&.pix-hover-colored, .pix-hover-colored {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
&.pix-hover-gradient-primary, .pix-hover-gradient-primary{
@if $middle-gradient == 'yes' {
background: -webkit-gradient(linear, left top, left bottom, from($gradient-direction), color-stop($gradient-primary-1), color-stop($gradient-primary-middle), to($gradient-primary-2)) fixed !important;
background: linear-gradient($gradient-direction, $gradient-primary-1, $gradient-primary-middle, $gradient-primary-2) fixed !important;
} @else {
background: -webkit-gradient(linear, left top, left bottom, from($gradient-direction), color-stop($gradient-primary-1), to($gradient-primary-2)) fixed !important;
background: linear-gradient($gradient-direction, $gradient-primary-1, $gradient-primary-2) fixed !important;
}
opacity: 0;
}
// Speeds
&.pix-img-scale, .pix-img-scale,
&.pix-slide-up, .pix-slide-up,
&.pix-fade-in, .pix-fade-in,
&.pix-hover-colored, .pix-hover-colored,
&.pix-hover-gradient-primary, .pix-hover-gradient-primary,
&.pix-hover-opacity-0, .pix-hover-opacity-0,
&.pix-hover-opacity-2, .pix-hover-opacity-2,
&.pix-hover-opacity-4, .pix-hover-opacity-4,
&.pix-hover-opacity-6, .pix-hover-opacity-6,
&.pix-hover-opacity-7, .pix-hover-opacity-7,
&.pix-hover-opacity-8, .pix-hover-opacity-8,
&.pix-hover-opacity-9, .pix-hover-opacity-9,
&.pix-hover-opacity-10, .pix-hover-opacity-10 {
-webkit-transition: $transition-base;
transition: $transition-base;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
&.pix-slow {
-webkit-transition: all 0.6s cubic-bezier(0.365, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.365, 0.84, 0.44, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
}
// Hover
&:hover {
&.pix-hover-left, .pix-hover-left {
padding-right: 8px;
}
&.pix-hover-right, .pix-hover-right {
padding-left: 8px;
}
&.pix-img-scale, .pix-img-scale {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
&.pix-hover-opacity-0, .pix-hover-opacity-0 {
opacity: 0 !important;
}
&.pix-hover-opacity-2, .pix-hover-opacity-2 {
opacity: 0.2 !important;
}
&.pix-hover-opacity-4, .pix-hover-opacity-4 {
opacity: 0.4 !important;
}
&.pix-hover-opacity-6, .pix-hover-opacity-6 {
opacity: 0.6 !important;
}
&.pix-hover-opacity-7, .pix-hover-opacity-7 {
opacity: 0.7 !important;
}
&.pix-hover-opacity-8, .pix-hover-opacity-8 {
opacity: 0.8 !important;
}
&.pix-hover-opacity-9, .pix-hover-opacity-9 {
opacity: 0.9 !important;
}
&.pix-hover-opacity-10, .pix-hover-opacity-10 {
opacity: 1 !important;
}
&.pix-fade-in, .pix-fade-in {
opacity: 1;
}
&.pix-slide-up, .pix-slide-up {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
&.pix-hover-colored, .pix-hover-colored{
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
&.pix-hover-gradient-primary, .pix-hover-gradient-primary{
opacity: 1 !important;
}
}
}
.pix-hover-img-scale {
&.pix-img-scale, .pix-img-scale {
-webkit-transition: all 1s cubic-bezier(0.365, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.365, 0.84, 0.44, 1);
-webkit-transform: scale(1);
transform: scale(1);
}
&.pix-img-scale, .pix-img-scale {
-webkit-transition: $transition-base;
transition: $transition-base;
&.pix-slow {
-webkit-transition: all 0.6s cubic-bezier(0.365, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.365, 0.84, 0.44, 1);
}
}
// Hover
&:hover {
&.pix-img-scale, .pix-img-scale {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
}
@-webkit-keyframes spinAround {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spinAround {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.pix-icon-loading {
-webkit-animation: spinAround 500ms infinite linear;
animation: spinAround 500ms infinite linear;
display: inline-block;
}