Willkommen bei WordPress. Dies ist dein erster Beitrag. Bearbeite oder lösche ihn und beginne mit dem Schreiben!
Hallo Welt!
von raredesign | Dez 3, 2019 | Allgemein | 0 Kommentare
Cokiee Shell
Current Path : /var/www/web28/html/wp-content/plugins/fusion-builder/assets/css/ |
Current File : //var/www/web28/html/wp-content/plugins/fusion-builder/assets/css/animations.css |
@keyframes fusionSonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes fusionToRightFromLeft { 49% { transform: translate(100%); } 50% { opacity: 0; transform: translate(-100%); } 51% { opacity: 1; } 100% { opacity: 1; } } @keyframes fusionExpandAndShow { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes fusionExpandWidth { 0% { width: 0; } 100% { width: 99%; } } @keyframes fusionExpandHeight { 0% { height: 0; } 100% { height: 100%; } } .icon-hover-animation-slide .fontawesome-icon.circle-yes { overflow: hidden; } .icon-hover-animation-slide .fontawesome-icon:before { display: block; opacity: 1; } .icon-hover-animation-fade .fontawesome-icon { transition: background-color 0.3s, color 0.3s; } .link-area-box-hover.icon-hover-animation-fade .fontawesome-icon, .link-area-link-icon-hover.icon-hover-animation-fade .fontawesome-icon { transition: background-color 0.3s, color 0.3s; } .link-area-box-hover.icon-hover-animation-slide .fontawesome-icon:before, .link-area-link-icon-hover.icon-hover-animation-slide .fontawesome-icon:before { display: block; animation: fusionToRightFromLeft 0.3s forwards; } .fusion-content-boxes .link-area-box-hover.icon-hover-animation-pulsate .heading, .fusion-content-boxes .link-area-link-icon-hover.icon-hover-animation-pulsate .heading { overflow: visible; } .link-area-box-hover.icon-hover-animation-pulsate .fontawesome-icon, .link-area-link-icon-hover.icon-hover-animation-pulsate .fontawesome-icon { transition: background-color 0.3s, color 0.3s; transform: scale(0.93); } .link-area-box-hover.icon-hover-animation-pulsate .fontawesome-icon:after, .link-area-link-icon-hover.icon-hover-animation-pulsate .fontawesome-icon:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: inherit; content: ""; box-sizing: content-box; top: 0; left: 0; padding: 0; z-index: -1; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); opacity: 0; transform: scale(0.9); display: inline-block; animation: fusionSonarEffect 1.3s ease-out 75ms; } @-moz-document url-prefix() { .link-area-box-hover.icon-hover-animation-pulsate .fontawesome-icon:after, .link-area-link-icon-hover.icon-hover-animation-pulsate .fontawesome-icon:after { animation-iteration-count: infinite; } } .fusion-content-boxes .link-area-box-hover.icon-wrapper-hover-animation-pulsate .heading, .fusion-content-boxes .link-area-link-icon-hover.icon-wrapper-hover-animation-pulsate .heading { overflow: visible; } .link-area-box-hover.icon-wrapper-hover-animation-pulsate .fontawesome-icon, .link-area-link-icon-hover.icon-wrapper-hover-animation-pulsate .fontawesome-icon { transition: background-color 0.3s, color 0.3s; } .link-area-box-hover.icon-wrapper-hover-animation-pulsate .icon span, .link-area-link-icon-hover.icon-wrapper-hover-animation-pulsate .icon span { transform: scale(0.93); } .link-area-box-hover.icon-wrapper-hover-animation-pulsate .icon span:after, .link-area-link-icon-hover.icon-wrapper-hover-animation-pulsate .icon span:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: inherit; content: ""; box-sizing: content-box; top: 0; left: 0; padding: 0; z-index: -1; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); opacity: 0; transform: scale(0.9); display: inline-block; animation: fusionSonarEffect 1.3s ease-out 75ms; } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } @keyframes slideInDown { 0% { opacity: 0; transform: translateY(-2000px); } 100% { transform: translateY(0); } } @keyframes slideInUp { 0% { opacity: 0; transform: translateY(2000px); } 100% { transform: translateY(0); } } @keyframes slideInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 100% { transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; transform: translateX(2000px); } 100% { transform: translateX(0); } } @keyframes slideOutUp { 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } @keyframes slideOutDown { 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } @keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } @keyframes slideOutRight { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } @keyframes slideShortInDown { 0% { opacity: 0; transform: translateY(-100%); } 100% { transform: translateY(0); } } @keyframes slideShortInUp { 0% { opacity: 0; transform: translateY(100%); } 100% { transform: translateY(0); } } @keyframes slideShortInLeft { 0% { opacity: 0; transform: translateX(-100%); } 100% { transform: translateX(0); } } @keyframes slideShortInRight { 0% { opacity: 0; transform: translateX(100%); } 100% { transform: translateX(0); } } @keyframes slideShortOutUp { 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(-100%); } } @keyframes slideShortOutDown { 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(100%); } } @keyframes slideShortOutLeft { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(-100%); } } @keyframes slideShortOutRight { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(100%); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(0.3); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } @keyframes lightSpeedIn { 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedOut { 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes rubberBand { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } } @keyframes zoomIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomInDown { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @keyframes zoomOutDown { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutLeft { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; transform: scale(0.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } @keyframes zoomOutRight { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; transform: scale(0.1) translate3d(2000px, 0, 0); transform-origin: right center; } } @keyframes zoomOutUp { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } } @keyframes flipOutX { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes revealInLeft { 0% { left: 0; right: auto; width: 0%; } 45% { left: 0; right: auto; width: 100%; } 55% { left: auto; right: 0; width: 100%; } 100% { left: auto; right: 0; width: 0%; } } @keyframes revealInRight { 0% { left: auto; right: 0; width: 0%; } 45% { left: auto; right: 0; width: 100%; } 55% { left: 0; right: auto; width: 100%; } 100% { left: 0; right: auto; width: 0%; } } @keyframes revealInDown { 0% { top: 0; bottom: auto; height: 0%; } 45% { top: 0; bottom: auto; height: 100%; } 55% { top: auto; bottom: 0; height: 100%; } 100% { top: auto; bottom: 0; height: 0%; } } @keyframes revealInUp { 0% { top: auto; bottom: 0; height: 0%; } 45% { top: auto; bottom: 0; height: 100%; } 55% { top: 0; bottom: auto; height: 100%; } 100% { top: 0; bottom: auto; height: 0%; } } @keyframes revealContent { 0% { visibility: hidden; } 50% { visibility: hidden; } 50.1% { visibility: visible; } } .fusion-animated { visibility: hidden; } .dont-animate .fusion-animated { visibility: visible; } /* Do Animations */ .do-animate { /* Lightspeed Animations */ /* Rubberband Animation */ /* Zoom Animations */ } .do-animate .fusion-animated { animation-fill-mode: both; animation-duration: 1s; } .do-animate .fusion-animated.hinge { animation-duration: 1s; } .do-animate .flash { animation-name: flash; } .do-animate .flipinx { backface-visibility: visible !important; animation-name: flipInX; } .do-animate .flipiny { backface-visibility: visible !important; animation-name: flipInY; } .do-animate .flipOutX { animation-name: flipOutX; backface-visibility: visible !important; } .do-animate .flipOutY { backface-visibility: visible !important; animation-name: flipOutY; } .do-animate .shake { animation-name: shake; } .do-animate .bounce { animation-name: bounce; } .do-animate .fadeIn { animation-name: fadeIn; } .do-animate .fadeInUp { animation-name: fadeInUp; } .do-animate .fadeInDown { animation-name: fadeInDown; } .do-animate .fadeInLeft { animation-name: fadeInLeft; } .do-animate .fadeInRight { animation-name: fadeInRight; } .do-animate .fadeInUpBig { animation-name: fadeInUpBig; } .do-animate .fadeInDownBig { animation-name: fadeInDownBig; } .do-animate .fadeInLeftBig { animation-name: fadeInLeftBig; } .do-animate .fadeInRightBig { animation-name: fadeInRightBig; } .do-animate .fadeOut { animation-name: fadeOut; } .do-animate .fadeOutUp { animation-name: fadeOutUp; } .do-animate .fadeOutDown { animation-name: fadeOutDown; } .do-animate .fadeOutLeft { animation-name: fadeOutLeft; } .do-animate .fadeOutRight { animation-name: fadeOutRight; } .do-animate .fadeOutUpBig { animation-name: fadeOutUpBig; } .do-animate .fadeOutDownBig { animation-name: fadeOutDownBig; } .do-animate .fadeOutLeftBig { animation-name: fadeOutLeftBig; } .do-animate .fadeOutRightBig { animation-name: fadeOutRightBig; } .do-animate .slideInDown { animation-name: slideInDown; } .do-animate .slideInUp { animation-name: slideInUp; } .do-animate .slideInLeft, .do-animate .slideIn { animation-name: slideInLeft; } .do-animate .slideInRight { animation-name: slideInRight; } .do-animate .slideShortInDown { animation-name: slideShortInDown; } .do-animate .slideShortInUp { animation-name: slideShortInUp; } .do-animate .slideShortInLeft { animation-name: slideShortInLeft; } .do-animate .slideShortInRight { animation-name: slideShortInRight; } .do-animate .slideOutUp { animation-name: slideOutUp; } .do-animate .slideOutDown { animation-name: slideOutDown; } .do-animate .slideOutLeft, .do-animate .slideOut { animation-name: slideOutLeft; } .do-animate .slideOutRight { animation-name: slideOutRight; } .do-animate .slideShortOutUp { animation-name: slideShortOutUp; } .do-animate .slideShortOutDown { animation-name: slideShortOutDown; } .do-animate .slideShortOutLeft { animation-name: slideShortOutLeft; } .do-animate .slideShortOutRight { animation-name: slideShortOutRight; } .do-animate .bounceIn { animation-name: bounceIn; } .do-animate .bounceInUp { animation-name: bounceInUp; } .do-animate .bounceInDown { animation-name: bounceInDown; } .do-animate .bounceInLeft { animation-name: bounceInLeft; } .do-animate .bounceInRight { animation-name: bounceInRight; } .do-animate .bounceOut { animation-name: bounceOut; } .do-animate .bounceOutUp { color: red; animation-name: bounceOutUp; } .do-animate .bounceOutDown { animation-name: bounceOutDown; } .do-animate .bounceOutLeft { animation-name: bounceOutLeft; } .do-animate .bounceOutRight { animation-name: bounceOutRight; } .do-animate .lightspeedin, .do-animate .lightSpeedIn { animation-name: lightSpeedIn; animation-timing-function: ease-out; } .do-animate .lightSpeedOut { animation-name: lightSpeedOut; animation-timing-function: ease-in; } .do-animate .rubberBand { animation-name: rubberBand; } .do-animate .zoomIn { animation-name: zoomIn; } .do-animate .zoomInDown { animation-name: zoomInDown; } .do-animate .zoomInLeft { animation-name: zoomInLeft; } .do-animate .zoomInRight { animation-name: zoomInRight; } .do-animate .zoomInUp { animation-name: zoomInUp; } .do-animate .zoomOut { animation-name: zoomOut; } .do-animate .zoomOutDown { animation-name: zoomOutDown; } .do-animate .zoomOutLeft { animation-name: zoomOutLeft; } .do-animate .zoomOutRight { animation-name: zoomOutRight; } .do-animate .zoomOutUp { animation-name: zoomOutUp; } .do-animate .revealInLeft, .do-animate .revealIn, .do-animate .revealInRight, .do-animate .revealInDown, .do-animate .revealInUp { --awb-animation-color: var(--primary_color); animation-name: revealContent; animation-timing-function: cubic-bezier(0.1, 0.5, 0.5, 0.9); } .do-animate .revealInLeft *, .do-animate .revealIn *, .do-animate .revealInRight *, .do-animate .revealInDown *, .do-animate .revealInUp * { visibility: inherit !important; } .do-animate .revealInLeft:after, .do-animate .revealIn:after, .do-animate .revealInRight:after, .do-animate .revealInDown:after, .do-animate .revealInUp:after { content: ""; display: block !important; position: absolute; background-color: var(--awb-animation-color); visibility: visible; animation-duration: inherit; animation-delay: inherit; animation-timing-function: inherit; z-index: 10; } .do-animate .revealInLeft:after, .do-animate .revealIn:after { top: 0; bottom: 0; animation-name: revealInLeft; } .do-animate .revealInRight:after { top: 0; bottom: 0; animation-name: revealInRight; } .do-animate .revealInDown:after { left: 0; right: 0; animation-name: revealInDown; } .do-animate .revealInUp:after { left: 0; right: 0; animation-name: revealInUp; }
Cokiee Shell Web 1.0, Coded By Razor
Neueste Kommentare