File: /home/parhudrw/anqa.it/wp-content/themes/essentials/inc/scss/elements/_text_animations.scss
/* --------------------------------
Primary style
-------------------------------- */
.pix-headline *::after, .pix-headline *::before {
box-sizing: border-box;
}
.pix-headline {
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
display: inline-block;
}
.pix-words-wrapper {
display: inline-block !important;
position: relative;
text-align: left;
overflow: visible;
height: 100%;
margin: 0;
-webkit-transition: width .4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
transition: width .4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
top: 0;
span {
display: inline;
position: absolute;
white-space: nowrap;
overflow: visible;
left: 0;
top: 0;
-webkit-transition: width .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: width .4s cubic-bezier(0.165, 0.84, 0.44, 1);
&.is-visible {
position: relative;
}
}
}
.no-js {
.pix-words-wrapper span {
opacity: 0;
&.is-visible {
opacity: 1;
}
}
}
/* --------------------------------
xrotate-1
-------------------------------- */
.pix-headline.rotate-1 {
.pix-words-wrapper {
-webkit-perspective: 300px;
perspective: 300px;
-webkit-transition: width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
span {
opacity: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
&.is-visible {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-animation: pix-rotate-1-in 1.2s;
animation: pix-rotate-1-in 1.2s;
}
&.is-hidden {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
-webkit-animation: pix-rotate-1-out 1.2s;
animation: pix-rotate-1-out 1.2s;
}
}
}
}
@-webkit-keyframes pix-rotate-1-in {
0% {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
opacity: 0;
}
35% {
-webkit-transform: rotateX(120deg);
transform: rotateX(120deg);
opacity: 0;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
opacity: 1;
}
}
@keyframes pix-rotate-1-in {
0% {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
opacity: 0;
}
35% {
-webkit-transform: rotateX(120deg);
transform: rotateX(120deg);
opacity: 0;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
opacity: 1;
}
}
@-webkit-keyframes pix-rotate-1-out {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 1;
}
35% {
-webkit-transform: rotateX(-20deg);
transform: rotateX(-20deg);
opacity: 1;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
opacity: 0;
}
}
@keyframes pix-rotate-1-out {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 1;
}
35% {
-webkit-transform: rotateX(-20deg);
transform: rotateX(-20deg);
opacity: 1;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
opacity: 0;
}
}
/* --------------------------------
xtype
-------------------------------- */
.pix-headline.type {
.pix-words-wrapper {
vertical-align: middle;
overflow: hidden;
&::after {
/* vertical bar */
content: '';
position: absolute;
right: 0;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 90%;
width: 1px;
background-color: #aebcb9;
}
&.waiting::after {
-webkit-animation: pix-pulse 1s infinite;
animation: pix-pulse 1s infinite;
}
&.selected {
background-color: #aebcb9;
}
&.selected::after {
visibility: hidden;
}
&.selected span {
color: #0d0d0d;
}
span {
visibility: hidden;
&.is-visible {
visibility: visible;
}
}
i {
position: absolute;
visibility: hidden;
&.in {
position: relative;
visibility: visible;
}
}
}
}
@-webkit-keyframes pix-pulse {
0% {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9);
transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
opacity: 0;
}
}
@keyframes pix-pulse {
0% {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9);
transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
opacity: 0;
}
}
/* --------------------------------
xrotate-2
-------------------------------- */
.pix-headline.rotate-2 .pix-words-wrapper {
-webkit-perspective: 300px;
perspective: 300px;
}
.pix-headline.rotate-2 i, .pix-headline.rotate-2 em {
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.pix-headline.rotate-2 b {
opacity: 0;
}
.pix-headline.rotate-2 i {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-20px) rotateX(90deg);
transform: translateZ(-20px) rotateX(90deg);
opacity: 0;
}
.is-visible .pix-headline.rotate-2 i {
opacity: 1;
}
.pix-headline.rotate-2 i.in {
-webkit-animation: cd-rotate-2-in 0.4s forwards;
animation: cd-rotate-2-in 0.4s forwards;
}
.pix-headline.rotate-2 i.out {
-webkit-animation: cd-rotate-2-out 0.4s forwards;
animation: cd-rotate-2-out 0.4s forwards;
}
.pix-headline.rotate-2 em {
-webkit-transform: translateZ(20px);
transform: translateZ(20px);
}
.no-csstransitions .pix-headline.rotate-2 i {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 0;
}
.no-csstransitions .pix-headline.rotate-2 i em {
-webkit-transform: scale(1);
transform: scale(1);
}
.no-csstransitions .pix-headline.rotate-2 .is-visible i {
opacity: 1;
}
@-webkit-keyframes cd-rotate-2-in {
0% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(90deg);
}
60% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(-10deg);
}
100% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0deg);
}
}
@keyframes cd-rotate-2-in {
0% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(90deg);
transform: translateZ(-20px) rotateX(90deg);
}
60% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(-10deg);
transform: translateZ(-20px) rotateX(-10deg);
}
100% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0deg);
transform: translateZ(-20px) rotateX(0deg);
}
}
@-webkit-keyframes cd-rotate-2-out {
0% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0);
}
60% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-100deg);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-90deg);
}
}
@keyframes cd-rotate-2-out {
0% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0);
transform: translateZ(-20px) rotateX(0);
}
60% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-100deg);
transform: translateZ(-20px) rotateX(-100deg);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-90deg);
transform: translateZ(-20px) rotateX(-90deg);
}
}
/* --------------------------------
xloading-bar
-------------------------------- */
.pix-headline.loading-bar {
> span {
display: inline;
// padding: .2em 0;
}
.pix-words-wrapper {
overflow: hidden;
vertical-align: top;
padding-bottom: 3px;
&::after {
/* loading bar */
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
z-index: 2;
opacity: 0;
-webkit-transition: width opacity 0.3s -0.1s;
transition: width opacity 0.3s -0.1s;
}
.pix-bar {
/* loading bar */
display: inline-block;
position: absolute;
left: 0;
top: 95% !important;
bottom: 0;
height: 3px;
width: 0;
z-index: 2;
opacity: 0;
-webkit-transition: width opacity 0.3s -0.1s;
transition: width opacity 0.3s -0.1s;
-webkit-background-clip: unset !important;
}
&.is-loading::after {
width: 100%;
opacity: 1;
-webkit-transition: width 3s;
transition: width 3s;
}
&.is-loading .pix-bar {
width: 100%;
opacity: 1;
-webkit-transition: width 3s;
transition: width 3s;
}
span {
opacity: 0;
-webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
&.is-visible {
opacity: 1;
top: 0;
}
}
}
}
/* --------------------------------
xslide
-------------------------------- */
.pix-headline.slide {
> span {
display: inline;
}
.pix-words-wrapper {
overflow: hidden;
vertical-align: top;
span {
opacity: 0;
}
}
span.is-visible {
top: 0;
opacity: 1;
-webkit-animation: slide-in 0.4s;
animation: slide-in 0.4s;
}
span.is-hidden {
-webkit-animation: slide-out 0.4s;
animation: slide-out 0.4s;
}
}
@-webkit-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(10%);
transform: translateY(10%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(10%);
transform: translateY(10%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes slide-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(110%);
transform: translateY(110%);
}
100% {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
@keyframes slide-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(110%);
transform: translateY(110%);
}
100% {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
/* --------------------------------
xslide-inverse
-------------------------------- */
.pix-headline.slide-inverse {
.pix-words-wrapper {
span {
opacity: 0;
}
}
span.is-visible {
top: 0;
opacity: 1;
-webkit-animation: slide-inverse-in 0.4s;
animation: slide-inverse-in 0.4s;
}
span.is-hidden {
-webkit-animation: slide-inverse-out 0.4s;
animation: slide-inverse-out 0.4s;
}
}
@-webkit-keyframes slide-inverse-in {
0% {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slide-inverse-in {
0% {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes slide-inverse-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
opacity: 0;
width: 0%;
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
}
@keyframes slide-inverse-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
opacity: 0;
width: 0%;
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
}
/* --------------------------------
xclip
-------------------------------- */
.pix-headline.clip span {
display: inline;
padding: .2em 0;
}
.pix-headline.clip .pix-words-wrapper {
overflow: hidden;
vertical-align: top;
-webkit-transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.pix-headline.clip .pix-words-wrapper::after {
/* line */
content: '';
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background-color: #aebcb9;
}
.pix-headline.clip b {
opacity: 0;
}
.pix-headline.clip b.is-visible {
opacity: 1;
}
/* --------------------------------
xzoom
-------------------------------- */
.pix-headline.zoom {
> span {
display: inline;
}
.pix-words-wrapper {
-webkit-perspective: 300px;
perspective: 300px;
span {
opacity: 0;
&.is-visible {
opacity: 1;
-webkit-animation: zoom-in 0.8s;
animation: zoom-in 0.8s;
}
&.is-hidden {
-webkit-animation: zoom-out 0.8s;
animation: zoom-out 0.8s;
}
}
}
}
@-webkit-keyframes zoom-in {
0% {
opacity: 0;
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
100% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes zoom-in {
0% {
opacity: 0;
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
100% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@-webkit-keyframes zoom-out {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-100px);
transform: translateZ(-100px);
}
}
@keyframes zoom-out {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-100px);
transform: translateZ(-100px);
}
}
/* --------------------------------
xrotate-3
-------------------------------- */
.pix-headline.rotate-3 .pix-words-wrapper {
-webkit-perspective: 300px;
perspective: 300px;
}
.pix-headline.rotate-3 b {
opacity: 0;
}
.pix-headline.rotate-3 i {
display: inline-block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.is-visible .pix-headline.rotate-3 i {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.pix-headline.rotate-3 i.in {
-webkit-animation: cd-rotate-3-in 0.6s forwards;
animation: cd-rotate-3-in 0.6s forwards;
}
.pix-headline.rotate-3 i.out {
-webkit-animation: cd-rotate-3-out 0.6s forwards;
animation: cd-rotate-3-out 0.6s forwards;
}
.no-csstransitions .pix-headline.rotate-3 i {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 0;
}
.no-csstransitions .pix-headline.rotate-3 .is-visible i {
opacity: 1;
}
@-webkit-keyframes cd-rotate-3-in {
0% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(0deg);
}
}
@keyframes cd-rotate-3-in {
0% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
@-webkit-keyframes cd-rotate-3-out {
0% {
-webkit-transform: rotateY(0);
}
100% {
-webkit-transform: rotateY(-180deg);
}
}
@keyframes cd-rotate-3-out {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
100% {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
}
/* --------------------------------
xscale
-------------------------------- */
.pix-headline.scale b {
opacity: 0;
}
.pix-headline.scale i {
display: inline-block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
.is-visible .pix-headline.scale i {
opacity: 1;
}
.pix-headline.scale i.in {
-webkit-animation: scale-up 0.6s forwards;
animation: scale-up 0.6s forwards;
}
.pix-headline.scale i.out {
-webkit-animation: scale-down 0.6s forwards;
animation: scale-down 0.6s forwards;
}
.no-csstransitions .pix-headline.scale i {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
.no-csstransitions .pix-headline.scale .is-visible i {
opacity: 1;
}
@-webkit-keyframes scale-up {
0% {
-webkit-transform: scale(0);
opacity: 0;
}
60% {
-webkit-transform: scale(1.2);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
@keyframes scale-up {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
60% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes scale-down {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
60% {
-webkit-transform: scale(0);
opacity: 0;
}
}
@keyframes scale-down {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
60% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
/* --------------------------------
xpush
-------------------------------- */
.pix-headline.push {
> span {
display: inline;
}
display: inline-block;
.pix-words-wrapper {
position: relative;
span {
opacity: 0;
line-height: 100%;
&.is-visible {
opacity: 1;
-webkit-animation: push-in 0.6s;
animation: push-in 0.6s;
}
&.is-hidden {
-webkit-animation: push-out 0.6s;
animation: push-out 0.6s;
}
}
}
}
@-webkit-keyframes push-in {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateX(10%);
transform: translateX(10%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes push-in {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateX(10%);
transform: translateX(10%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes push-out {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
60% {
opacity: 0;
-webkit-transform: translateX(110%);
transform: translateX(110%);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes push-out {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
60% {
opacity: 0;
-webkit-transform: translateX(110%);
transform: translateX(110%);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
/* --------------------------------
fade
-------------------------------- */
.pix-headline.pixfade {
> span {
display: inline;
}
display: inline-block;
.pix-words-wrapper {
position: relative;
span {
opacity: 0;
line-height: 100%;
&.is-visible {
opacity: 1;
-webkit-animation: headline-fade-in 0.5s;
animation: headline-fade-in 0.5s;
}
&.is-hidden {
-webkit-animation: headline-fade-out 0.5s;
animation: headline-fade-out 0.5s;
}
}
}
}
@-webkit-keyframes headline-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes headline-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes headline-fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes headline-fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}