1260 lines
23 KiB
CSS
1260 lines
23 KiB
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;
|
|
}
|