| Current Path : /home/ereika83/www/wp-content/plugins/bbpowerpack/modules/pp-animated-headlines/css/ |
| Current File : /home/ereika83/www/wp-content/plugins/bbpowerpack/modules/pp-animated-headlines/css/frontend.css |
.pp-headline--style-highlight .pp-headline-dynamic-wrapper {
overflow: visible;
}
.pp-headline--style-highlight .pp-headline-dynamic-text {
z-index: 1;
}
.pp-headline--style-highlight .pp-headline-plain-text {
z-index: 1;
position: relative;
}
.pp-headline--style-highlight svg {
position: absolute;
top: 50%;
left: 50%;
width: calc( 100% + 20px);
height: calc( 100% + 20px);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: visible;
}
.pp-headline--style-highlight svg path {
stroke: red;
stroke-width: 9;
fill: none;
stroke-dasharray: 1500;
-webkit-animation: pp-headline-dash-no-loop 10s ease;
animation: pp-headline-dash-no-loop 10s ease;
}
.pp-headline--style-highlight.pp-headline-loop svg path {
-webkit-animation: pp-headline-dash 10s infinite;
animation: pp-headline-dash 10s infinite;
}
.pp-headline--style-highlight svg path:nth-of-type(2) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
@-webkit-keyframes pp-headline-dash {
0% {
stroke-dasharray: 0 1500;
}
15% {
stroke-dasharray: 1500 1500;
}
85% {
opacity: 1;
}
90% {
stroke-dasharray: 1500 1500;
opacity: 0;
}
100% {
stroke-dasharray: 0 1500;
opacity: 0;
}
}
@keyframes pp-headline-dash {
0% {
stroke-dasharray: 0 1500;
}
15% {
stroke-dasharray: 1500 1500;
}
85% {
opacity: 1;
}
90% {
stroke-dasharray: 1500 1500;
opacity: 0;
}
100% {
stroke-dasharray: 0 1500;
opacity: 0;
}
}
@-webkit-keyframes pp-headline-dash-no-loop {
0% {
stroke-dasharray: 0 1500;
}
15% {
stroke-dasharray: 1500 1500;
}
85% {
opacity: 1;
}
90% {
stroke-dasharray: 1500 1500;
opacity: 1;
}
100% {
stroke-dasharray: 1500 1500;
opacity: 1;
}
}
@keyframes pp-headline-dash-no-loop {
0% {
stroke-dasharray: 0 1500;
}
15% {
stroke-dasharray: 1500 1500;
}
85% {
opacity: 1;
}
90% {
stroke-dasharray: 1500 1500;
opacity: 1;
}
100% {
stroke-dasharray: 1500 1500;
opacity: 1;
}
}
.pp-headline-dynamic-wrapper {
display: inline-block;
position: relative;
text-align: left;
transition: width 0.3s ease;
}
.pp-headline-dynamic-wrapper.has-stopped {
width: auto !important;
}
.pp-headline-dynamic-wrapper.has-stopped:after,
.pp-headline-dynamic-wrapper.has-stopped .pp-headline-dynamic-text:after {
display: none;
}
.pp-headline-dynamic-wrapper .pp-headline-dynamic-text {
display: inline-block;
position: absolute;
white-space: nowrap;
top: 0;
left: 0;
right: 0;
}
.pp-headline-center.pp-headline-animation-type-wave .pp-headline-dynamic-wrapper .pp-headline-dynamic-text {
left: 50%;
transform: translateX(-50%);
}
.pp-headline-center .pp-headline-plain-text + .pp-headline-dynamic-wrapper .pp-headline-dynamic-text {
left: 0;
transform: translateX(0);
}
.pp-headline-dynamic-wrapper .pp-headline-dynamic-text.pp-headline-text-active {
position: relative;
}
.pp-headline-dynamic-wrapper .pp-headline-dynamic-text i,
.pp-headline-dynamic-wrapper .pp-headline-dynamic-text i em {
font-style: normal;
}
.pp-headline-animation-type-flip .pp-headline-dynamic-wrapper {
-webkit-perspective: 300px;
perspective: 300px;
}
.pp-headline-animation-type-flip .pp-headline-dynamic-text {
opacity: 0;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.pp-headline-animation-type-flip .pp-headline-dynamic-text.pp-headline-text-active {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-animation: pp-headline-flip-in 1.2s;
animation: pp-headline-flip-in 1.2s;
}
.pp-headline-animation-type-flip .pp-headline-dynamic-text.pp-headline-text-inactive {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
-webkit-animation: pp-headline-flip-out 1.2s;
animation: pp-headline-flip-out 1.2s;
}
@-webkit-keyframes pp-headline-flip-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 pp-headline-flip-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 pp-headline-flip-out {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 1;
}
35% {
-webkit-transform: rotateX(-40deg);
transform: rotateX(-40deg);
opacity: 1;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
opacity: 0;
}
}
@keyframes pp-headline-flip-out {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 1;
}
35% {
-webkit-transform: rotateX(-40deg);
transform: rotateX(-40deg);
opacity: 1;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
opacity: 0;
}
}
.pp-headline-animation-type-typing .pp-headline-dynamic-wrapper {
vertical-align: top;
overflow: hidden;
}
.pp-headline-animation-type-typing .pp-headline-dynamic-wrapper::after {
/* vertical bar */
content: '';
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height: 90%;
width: 1px;
background-color: #0d0d0d;
}
.pp-headline-animation-type-typing .pp-headline-dynamic-wrapper:not(.pp-headline-typing-selected):after {
-webkit-animation: pp-headline-pulse 1s infinite;
animation: pp-headline-pulse 1s infinite;
}
.pp-headline-animation-type-typing .pp-headline-dynamic-wrapper.pp-headline-typing-selected {
background-color: #0d0d0d;
}
.pp-headline-animation-type-typing .pp-headline-dynamic-wrapper.pp-headline-typing-selected::after {
visibility: hidden;
}
.pp-headline-animation-type-typing .pp-headline-dynamic-wrapper.pp-headline-typing-selected .pp-headline-dynamic-text {
color: #aebcb9;
}
.pp-headline-animation-type-typing .pp-headline-dynamic-text:not(.pp-headline-text-active) {
visibility: hidden;
}
.pp-headline-animation-type-typing .pp-headline-dynamic-letter:not(.pp-headline-animation-in) {
position: absolute;
visibility: hidden;
}
@-webkit-keyframes pp-headline-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 pp-headline-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;
}
}
.pp-headline-animation-type-swirl .pp-headline-dynamic-wrapper {
-webkit-perspective: 300px;
perspective: 300px;
}
.pp-headline-animation-type-swirl .pp-headline-dynamic-letter {
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.pp-headline-animation-type-swirl .pp-headline-dynamic-text {
opacity: 0;
}
.pp-headline-animation-type-swirl .pp-headline-dynamic-letter {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-20px) rotateX(90deg);
transform: translateZ(-20px) rotateX(90deg);
opacity: 0;
}
.pp-headline-text-active .pp-headline-animation-type-swirl .pp-headline-dynamic-letter {
opacity: 1;
}
.pp-headline-animation-type-swirl .pp-headline-dynamic-letter.pp-headline-animation-in {
-webkit-animation: pp-headline-swirl-in .4s forwards;
animation: pp-headline-swirl-in .4s forwards;
}
.pp-headline-animation-type-swirl .pp-headline-dynamic-letter:not(.pp-headline-animation-in) {
-webkit-animation: pp-headline-swirl-out .4s forwards;
animation: pp-headline-swirl-out .4s forwards;
}
@-webkit-keyframes pp-headline-swirl-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);
}
}
@keyframes pp-headline-swirl-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 pp-headline-swirl-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);
}
}
@keyframes pp-headline-swirl-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);
}
}
.pp-headline-animation-type-slide-down .pp-headline-text-wrapper {
display: inline-block;
padding: .2em 0;
}
.pp-headline-animation-type-slide-down .pp-headline-dynamic-wrapper {
overflow: hidden;
vertical-align: top;
}
.pp-headline-animation-type-slide-down .pp-headline-dynamic-text {
opacity: 0;
top: .2em;
}
.pp-headline-animation-type-slide-down .pp-headline-dynamic-text.pp-headline-text-active {
top: 0;
opacity: 1;
-webkit-animation: pp-headline-slide-down-in .6s;
animation: pp-headline-slide-down-in .6s;
}
.pp-headline-animation-type-slide-down .pp-headline-dynamic-text.pp-headline-text-inactive {
-webkit-animation: pp-headline-slide-down-out .6s;
animation: pp-headline-slide-down-out .6s;
}
@-webkit-keyframes pp-headline-slide-down-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(20%);
transform: translateY(20%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes pp-headline-slide-down-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(20%);
transform: translateY(20%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes pp-headline-slide-down-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(120%);
transform: translateY(120%);
}
100% {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
@keyframes pp-headline-slide-down-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(120%);
transform: translateY(120%);
}
100% {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
.pp-headline-animation-type-clip .pp-headline-text-wrapper {
display: inline-block;
padding: .2em 0;
}
.pp-headline-animation-type-clip .pp-headline-dynamic-wrapper {
overflow: hidden;
vertical-align: top;
}
.pp-headline-animation-type-clip .pp-headline-dynamic-wrapper::after {
/* line */
content: '';
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background-color: #0d0d0d;
}
.pp-headline-animation-type-clip .pp-headline-dynamic-text {
opacity: 0;
}
.pp-headline-animation-type-clip .pp-headline-dynamic-text.pp-headline-text-active {
opacity: 1;
}
.pp-headline-animation-type-drop-in .pp-headline-dynamic-wrapper {
-webkit-perspective: 300px;
perspective: 300px;
}
.pp-headline-animation-type-drop-in .pp-headline-dynamic-text {
opacity: 0;
}
.pp-headline-animation-type-drop-in .pp-headline-dynamic-text.pp-headline-text-active {
opacity: 1;
-webkit-animation: pp-headline-drop-in-in .8s;
animation: pp-headline-drop-in-in .8s;
}
.pp-headline-animation-type-drop-in .pp-headline-dynamic-text.pp-headline-text-inactive {
-webkit-animation: pp-headline-drop-in-out .8s;
animation: pp-headline-drop-in-out .8s;
}
@-webkit-keyframes pp-headline-drop-in-in {
0% {
opacity: 0;
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
100% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes pp-headline-drop-in-in {
0% {
opacity: 0;
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
100% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@-webkit-keyframes pp-headline-drop-in-out {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-100px);
transform: translateZ(-100px);
}
}
@keyframes pp-headline-drop-in-out {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-100px);
transform: translateZ(-100px);
}
}
.pp-headline-animation-type-blinds .pp-headline-dynamic-wrapper {
-webkit-perspective: 300px;
perspective: 300px;
}
.pp-headline-animation-type-blinds .pp-headline-dynamic-text {
opacity: 0;
}
.pp-headline-animation-type-blinds .pp-headline-dynamic-letter {
display: inline-block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.pp-headline-text-active .pp-headline-animation-type-blinds .pp-headline-dynamic-letter {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.pp-headline-animation-type-blinds .pp-headline-dynamic-letter.pp-headline-animation-in {
-webkit-animation: pp-headline-blinds-in .6s forwards;
animation: pp-headline-blinds-in .6s forwards;
}
.pp-headline-animation-type-blinds .pp-headline-dynamic-letter:not(.pp-headline-animation-in) {
-webkit-animation: pp-headline-blinds-out .6s forwards;
animation: pp-headline-blinds-out .6s forwards;
}
@-webkit-keyframes pp-headline-blinds-in {
0% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
@keyframes pp-headline-blinds-in {
0% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
@-webkit-keyframes pp-headline-blinds-out {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
100% {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
}
@keyframes pp-headline-blinds-out {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
100% {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
}
.pp-headline-animation-type-wave .pp-headline-dynamic-text {
opacity: 0;
}
.pp-headline-animation-type-wave .pp-headline-dynamic-letter {
display: inline-block;
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.pp-headline-text-active .pp-headline-animation-type-wave .pp-headline-dynamic-letter {
opacity: 1;
}
.pp-headline-animation-type-wave .pp-headline-dynamic-letter.pp-headline-animation-in {
-webkit-animation: pp-headline-wave-up .6s forwards;
animation: pp-headline-wave-up .6s forwards;
}
.pp-headline-animation-type-wave .pp-headline-dynamic-letter:not(.pp-headline-animation-in) {
-webkit-animation: pp-headline-wave-down .6s forwards;
animation: pp-headline-wave-down .6s forwards;
}
@-webkit-keyframes pp-headline-wave-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;
}
}
@keyframes pp-headline-wave-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 pp-headline-wave-down {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
60% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@keyframes pp-headline-wave-down {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
60% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
.pp-headline-animation-type-slide .pp-headline-dynamic-text {
opacity: 0;
}
.pp-headline-animation-type-slide .pp-headline-dynamic-text.pp-headline-text-active {
opacity: 1;
-webkit-animation: pp-headline-slide-in .6s;
animation: pp-headline-slide-in .6s;
}
.pp-headline-animation-type-slide .pp-headline-dynamic-text.pp-headline-text-inactive {
-webkit-animation: pp-headline-slide-out .6s;
animation: pp-headline-slide-out .6s;
}
@-webkit-keyframes pp-headline-slide-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 pp-headline-slide-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 pp-headline-slide-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 pp-headline-slide-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%);
}
}