1739 lines
30 KiB
CSS
1739 lines
30 KiB
CSS
|
@keyframes rotateme {
|
||
|
|
from {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateme {
|
||
|
|
from {
|
||
|
|
-webkit-transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
-webkit-transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes rotateme {
|
||
|
|
from {
|
||
|
|
-moz-transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
-moz-transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-o-keyframes rotateme {
|
||
|
|
from {
|
||
|
|
-o-transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
-o-transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.rotate-me {
|
||
|
|
animation-name: rotateme;
|
||
|
|
animation-duration: 24s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
|
||
|
|
-webkit-animation-name: rotateme;
|
||
|
|
-webkit-animation-duration: 24s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-moz-animation-name: rotateme;
|
||
|
|
-moz-animation-duration: 24s;
|
||
|
|
-moz-animation-iteration-count: infinite;
|
||
|
|
-moz-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-ms-animation-name: rotateme;
|
||
|
|
-ms-animation-duration: 24s;
|
||
|
|
-ms-animation-iteration-count: infinite;
|
||
|
|
-ms-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-o-animation-name: rotateme;
|
||
|
|
-o-animation-duration: 24s;
|
||
|
|
-o-animation-iteration-count: infinite;
|
||
|
|
-o-animation-timing-function: linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@-webkit-keyframes shine {
|
||
|
|
100% {
|
||
|
|
left: 125%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes shine {
|
||
|
|
100% {
|
||
|
|
left: 125%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@-webkit-keyframes float-bob {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateX(-100px);
|
||
|
|
transform: translateX(-100px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: translateX(-10px);
|
||
|
|
transform: translateX(-10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateX(-100px);
|
||
|
|
transform: translateX(-100px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes float-bob {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateX(-100px);
|
||
|
|
transform: translateX(-100px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: translateX(-10px);
|
||
|
|
transform: translateX(-10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateX(-100px);
|
||
|
|
transform: translateX(-100px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.float-bob {
|
||
|
|
animation-name: float-bob;
|
||
|
|
animation-duration: 7s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
|
||
|
|
-webkit-animation-name: float-bob;
|
||
|
|
-webkit-animation-duration: 7s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-moz-animation-name: float-bob;
|
||
|
|
-moz-animation-duration: 7s;
|
||
|
|
-moz-animation-iteration-count: infinite;
|
||
|
|
-moz-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-ms-animation-name: float-bob;
|
||
|
|
-ms-animation-duration: 7s;
|
||
|
|
-ms-animation-iteration-count: infinite;
|
||
|
|
-ms-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-o-animation-name: float-bob;
|
||
|
|
-o-animation-duration: 7s;
|
||
|
|
-o-animation-iteration-count: infinite;
|
||
|
|
-o-animation-timing-function: linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***
|
||
|
|
=============================================
|
||
|
|
circle Css
|
||
|
|
=============================================
|
||
|
|
***/
|
||
|
|
@-webkit-keyframes circle {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
width: 200%;
|
||
|
|
height: 200%;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes circle {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
width: 200%;
|
||
|
|
height: 200%;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/***
|
||
|
|
=============================================
|
||
|
|
Zoom In Out Css
|
||
|
|
=============================================
|
||
|
|
***/
|
||
|
|
.zoominout {
|
||
|
|
animation-name: zoomInOut;
|
||
|
|
animation-duration: 3s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-timing-function: ease-in-out;
|
||
|
|
|
||
|
|
-webkit-animation-name: zoomInOut;
|
||
|
|
-webkit-animation-duration: 3s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-timing-function: ease-in-out;
|
||
|
|
|
||
|
|
-moz-animation-name: zoomInOut;
|
||
|
|
-moz-animation-duration: 3s;
|
||
|
|
-moz-animation-iteration-count: infinite;
|
||
|
|
-moz-animation-timing-function: ease-in-out;
|
||
|
|
|
||
|
|
-ms-animation-name: zoomInOut;
|
||
|
|
-ms-animation-duration: 3s;
|
||
|
|
-ms-animation-iteration-count: infinite;
|
||
|
|
-ms-animation-timing-function: ease-in-out;
|
||
|
|
|
||
|
|
-o-animation-name: zoomInOut;
|
||
|
|
-o-animation-duration: 3s;
|
||
|
|
-o-animation-iteration-count: infinite;
|
||
|
|
-o-animation-timing-function: ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoomInOut {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate(0deg) scale(0.7);
|
||
|
|
transform: rotate(0deg) scale(0.7);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: rotate(180deg) scale(1);
|
||
|
|
transform: rotate(180deg) scale(1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(360deg) scale(0.7);
|
||
|
|
transform: rotate(360deg) scale(0.7);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***
|
||
|
|
=============================================
|
||
|
|
Zoom In Out Css
|
||
|
|
=============================================
|
||
|
|
***/
|
||
|
|
.zoominout-2 {
|
||
|
|
animation-name: zoomInOut-2;
|
||
|
|
animation-duration: 3s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-timing-function: ease-in-out;
|
||
|
|
|
||
|
|
-webkit-animation-name: zoomInOut-2;
|
||
|
|
-webkit-animation-duration: 3s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-timing-function: ease-in-out;
|
||
|
|
|
||
|
|
-moz-animation-name: zoomInOut-2;
|
||
|
|
-moz-animation-duration: 3s;
|
||
|
|
-moz-animation-iteration-count: infinite;
|
||
|
|
-moz-animation-timing-function: ease-in-out;
|
||
|
|
|
||
|
|
-ms-animation-name: zoomInOut-2;
|
||
|
|
-ms-animation-duration: 3s;
|
||
|
|
-ms-animation-iteration-count: infinite;
|
||
|
|
-ms-animation-timing-function: ease-in-out;
|
||
|
|
|
||
|
|
-o-animation-name: zoomInOut-2;
|
||
|
|
-o-animation-duration: 3s;
|
||
|
|
-o-animation-iteration-count: infinite;
|
||
|
|
-o-animation-timing-function: ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoomInOut-2 {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate(0deg) scale(0.7);
|
||
|
|
transform: rotate(0deg) scale(0.7);
|
||
|
|
opacity: .50;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: rotate(0deg) scale(1);
|
||
|
|
transform: rotate(0deg) scale(1);
|
||
|
|
opacity: .50;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(0deg) scale(0.7);
|
||
|
|
transform: rotate(0deg) scale(0.7);
|
||
|
|
opacity: .50;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@-webkit-keyframes bgSlideReverse {
|
||
|
|
0% {
|
||
|
|
background-position: 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
background-position: 100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
background-position: 200px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
background-position: 150px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
background-position: 100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position: 0px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bgSlideReverse {
|
||
|
|
0% {
|
||
|
|
background-position: 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
background-position: 100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
background-position: 200px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
background-position: 150px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
background-position: 100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position: 0px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@-webkit-keyframes bgSlideReverse2 {
|
||
|
|
0% {
|
||
|
|
background-position: -0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
background-position: -100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
background-position: -200px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
background-position: -150px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
background-position: -100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position: -0px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bgSlideReverse2 {
|
||
|
|
0% {
|
||
|
|
background-position: -0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
background-position: -100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
background-position: -200px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
background-position: -150px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
background-position: -100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position: -0px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@-webkit-keyframes banner-animate {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateX(-1000px);
|
||
|
|
transform: translateX(-1000px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: translateX(-10px);
|
||
|
|
transform: translateX(-10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateX(-1000px);
|
||
|
|
transform: translateX(-1000px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes banner-animate {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateX(-1000px);
|
||
|
|
transform: translateX(-1000px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: translateX(-10px);
|
||
|
|
transform: translateX(-10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateX(-1000px);
|
||
|
|
transform: translateX(-1000px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.banner-animate {
|
||
|
|
animation-name: banner-animate;
|
||
|
|
animation-duration: 70s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
-webkit-animation-name: banner-animate;
|
||
|
|
-webkit-animation-duration: 70s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-moz-animation-name: banner-animate;
|
||
|
|
-moz-animation-duration: 70s;
|
||
|
|
-moz-animation-iteration-count: infinite;
|
||
|
|
-moz-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-ms-animation-name: banner-animate;
|
||
|
|
-ms-animation-duration: 70s;
|
||
|
|
-ms-animation-iteration-count: infinite;
|
||
|
|
-ms-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-o-animation-name: banner-animate;
|
||
|
|
-o-animation-duration: 70s;
|
||
|
|
-o-animation-iteration-count: infinite;
|
||
|
|
-o-animation-timing-function: linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@-webkit-keyframes ripple {
|
||
|
|
70% {
|
||
|
|
box-shadow: 0 0 0 40px rgba(10, 165, 205, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
box-shadow: 0 0 0 0 rgba(10, 165, 205, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes ripple {
|
||
|
|
70% {
|
||
|
|
box-shadow: 0 0 0 40px rgba(10, 165, 205, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
box-shadow: 0 0 0 0 rgba(10, 165, 205, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/***
|
||
|
|
=============================================
|
||
|
|
Animation1 Css
|
||
|
|
=============================================
|
||
|
|
***/
|
||
|
|
@-webkit-keyframes animation1 {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(0deg) translateX(0);
|
||
|
|
transform: rotate(0deg) translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
25%,
|
||
|
|
75% {
|
||
|
|
-webkit-transform: rotate(5deg) translateX(15px);
|
||
|
|
transform: rotate(5deg) translateX(15px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: rotate(10deg) translateX(30px);
|
||
|
|
transform: rotate(10deg) translateX(30px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes animation1 {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(0deg) translateX(0);
|
||
|
|
transform: rotate(0deg) translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
25%,
|
||
|
|
75% {
|
||
|
|
-webkit-transform: rotate(5deg) translateX(15px);
|
||
|
|
transform: rotate(5deg) translateX(15px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: rotate(10deg) translateX(30px);
|
||
|
|
transform: rotate(10deg) translateX(30px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***
|
||
|
|
=============================================
|
||
|
|
Animation2 Css
|
||
|
|
=============================================
|
||
|
|
***/
|
||
|
|
@animation2 {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotateY(0deg);
|
||
|
|
transform: rotateY(0deg)
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotateY(360deg);
|
||
|
|
transform: rotateY(360deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes animation2 {
|
||
|
|
0% {
|
||
|
|
-moz-transform: rotateY(0deg);
|
||
|
|
transform: rotateY(0deg)
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-moz-transform: rotateY(360deg);
|
||
|
|
transform: rotateY(360deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-o-keyframes animation2 {
|
||
|
|
0% {
|
||
|
|
-o-transform: rotateY(0deg);
|
||
|
|
transform: rotateY(0deg)
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-o-transform: rotateY(360deg);
|
||
|
|
transform: rotateY(360deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes animation2 {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotateY(0deg);
|
||
|
|
-moz-transform: rotateY(0deg);
|
||
|
|
-o-transform: rotateY(0deg);
|
||
|
|
transform: rotateY(0deg)
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotateY(360deg);
|
||
|
|
-moz-transform: rotateY(360deg);
|
||
|
|
-o-transform: rotateY(360deg);
|
||
|
|
transform: rotateY(360deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@-webkit-keyframes bgSlide {
|
||
|
|
0% {
|
||
|
|
background-position: 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
background-position: -100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
background-position: -200px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
background-position: -150px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
background-position: -100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position: 0px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@keyframes bgSlide {
|
||
|
|
0% {
|
||
|
|
background-position: 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
background-position: -100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
background-position: -200px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
background-position: -150px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
background-position: -100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position: 0px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes bgSlideReverse {
|
||
|
|
0% {
|
||
|
|
background-position: 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
background-position: 100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
background-position: 200px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
background-position: 150px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
background-position: 100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position: 0px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bgSlideReverse {
|
||
|
|
0% {
|
||
|
|
background-position: 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
background-position: 100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
background-position: 200px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
background-position: 150px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
background-position: 100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position: 0px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes ribbonRotate {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(0);
|
||
|
|
transform: rotate(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
25%,
|
||
|
|
75% {
|
||
|
|
-webkit-transform: rotate(15deg);
|
||
|
|
transform: rotate(15deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: rotate(30deg);
|
||
|
|
transform: rotate(30deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes ribbonRotate {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(0);
|
||
|
|
transform: rotate(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
25%,
|
||
|
|
75% {
|
||
|
|
-webkit-transform: rotate(15deg);
|
||
|
|
transform: rotate(15deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: rotate(30deg);
|
||
|
|
transform: rotate(30deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@-webkit-keyframes footerFish {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateX(0) translateY(0) rotate(0);
|
||
|
|
transform: translateX(0) translateY(0) rotate(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
25%,
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translateX(20px) translateY(30px) rotate(25deg);
|
||
|
|
transform: translateX(20px) translateY(30px) rotate(25deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: translateX(40px) translateY(60px) rotate(45deg);
|
||
|
|
transform: translateX(40px) translateY(60px) rotate(45deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes footerFish {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateX(0) translateY(0) rotate(0);
|
||
|
|
transform: translateX(0) translateY(0) rotate(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
25%,
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translateX(20px) translateY(30px) rotate(25deg);
|
||
|
|
transform: translateX(20px) translateY(30px) rotate(25deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: translateX(40px) translateY(60px) rotate(45deg);
|
||
|
|
transform: translateX(40px) translateY(60px) rotate(45deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes contactSwimmer {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateX(0) translateY(0) rotate(0);
|
||
|
|
transform: translateX(0) translateY(0) rotate(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
25%,
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translateX(15px) translateY(20px) rotate(10deg);
|
||
|
|
transform: translateX(15px) translateY(20px) rotate(10deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: translateX(60px) translateY(35px) rotate(15deg);
|
||
|
|
transform: translateX(60px) translateY(35px) rotate(15deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes contactSwimmer {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateX(0) translateY(0) rotate(0);
|
||
|
|
transform: translateX(0) translateY(0) rotate(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
25%,
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translateX(15px) translateY(20px) rotate(10deg);
|
||
|
|
transform: translateX(15px) translateY(20px) rotate(10deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: translateX(60px) translateY(35px) rotate(15deg);
|
||
|
|
transform: translateX(60px) translateY(35px) rotate(15deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***
|
||
|
|
=============================================
|
||
|
|
Float Bob Y Animation Css
|
||
|
|
=============================================
|
||
|
|
***/
|
||
|
|
@-webkit-keyframes float-bob-y {
|
||
|
|
0% {
|
||
|
|
transform: translateY(-20px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: translateY(-10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateY(-20px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes float-bob-y {
|
||
|
|
0% {
|
||
|
|
transform: translateY(-20px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: translateY(-10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateY(-20px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.float-bob-y {
|
||
|
|
-webkit-animation-name: float-bob-y;
|
||
|
|
animation-name: float-bob-y;
|
||
|
|
-webkit-animation-duration: 2s;
|
||
|
|
animation-duration: 2s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-timing-function: linear;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@-webkit-keyframes footerTree {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(0deg) translateX(0);
|
||
|
|
transform: rotate(0deg) translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
25%,
|
||
|
|
75% {
|
||
|
|
-webkit-transform: rotate(5deg) translateX(15px);
|
||
|
|
transform: rotate(5deg) translateX(15px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: rotate(10deg) translateX(30px);
|
||
|
|
transform: rotate(10deg) translateX(30px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes footerTree {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(0deg) translateX(0);
|
||
|
|
transform: rotate(0deg) translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
25%,
|
||
|
|
75% {
|
||
|
|
-webkit-transform: rotate(5deg) translateX(15px);
|
||
|
|
transform: rotate(5deg) translateX(15px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: rotate(10deg) translateX(30px);
|
||
|
|
transform: rotate(10deg) translateX(30px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footertree {
|
||
|
|
-webkit-animation: footerTree 5s ease-in infinite;
|
||
|
|
animation: footerTree 5s ease-in infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@service_hexagon_2 {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotateY(0deg);
|
||
|
|
transform: rotateY(0deg)
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotateY(360deg);
|
||
|
|
transform: rotateY(360deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes service_hexagon_2 {
|
||
|
|
0% {
|
||
|
|
-moz-transform: rotateY(0deg);
|
||
|
|
transform: rotateY(0deg)
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-moz-transform: rotateY(360deg);
|
||
|
|
transform: rotateY(360deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-o-keyframes service_hexagon_2 {
|
||
|
|
0% {
|
||
|
|
-o-transform: rotateY(0deg);
|
||
|
|
transform: rotateY(0deg)
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-o-transform: rotateY(360deg);
|
||
|
|
transform: rotateY(360deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes service_hexagon_2 {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotateY(0deg);
|
||
|
|
-moz-transform: rotateY(0deg);
|
||
|
|
-o-transform: rotateY(0deg);
|
||
|
|
transform: rotateY(0deg)
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotateY(360deg);
|
||
|
|
-moz-transform: rotateY(360deg);
|
||
|
|
-o-transform: rotateY(360deg);
|
||
|
|
transform: rotateY(360deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@keyframes bgSlide {
|
||
|
|
0% {
|
||
|
|
background-position: 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
background-position: -100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
background-position: -200px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
background-position: -150px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
background-position: -100px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position: 0px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@keyframes rotateScale {
|
||
|
|
from {
|
||
|
|
transform: rotate(0deg) scale(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateScale {
|
||
|
|
from {
|
||
|
|
transform: rotate(0deg) scale(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes rotateScale {
|
||
|
|
from {
|
||
|
|
transform: rotate(0deg) scale(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-o-keyframes rotateScale {
|
||
|
|
from {
|
||
|
|
transform: rotate(0deg) scale(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.rotatescale {
|
||
|
|
-webkit-animation-name: rotateScale;
|
||
|
|
-webkit-animation-duration: 20s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-moz-animation-name: rotateScale;
|
||
|
|
-moz-animation-duration: 20s;
|
||
|
|
-moz-animation-iteration-count: infinite;
|
||
|
|
-moz-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-ms-animation-name: rotateScale;
|
||
|
|
-ms-animation-duration: 20s;
|
||
|
|
-ms-animation-iteration-count: infinite;
|
||
|
|
-ms-animation-timing-function: linear;
|
||
|
|
|
||
|
|
animation-name: rotateScale;
|
||
|
|
animation-duration: 20s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*--------------------------------------------------------------
|
||
|
|
# Animations
|
||
|
|
--------------------------------------------------------------*/
|
||
|
|
@-webkit-keyframes bubbleMover {
|
||
|
|
0% {
|
||
|
|
transform: translateY(0px) translateX(0) rotate(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
transform: translateY(30px) translateX(50px) rotate(15deg);
|
||
|
|
transform-origin: center center;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: translateY(50px) translateX(100px) rotate(45deg);
|
||
|
|
transform-origin: right bottom;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
transform: translateY(30px) translateX(50px) rotate(15deg);
|
||
|
|
transform-origin: left top;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateY(0px) translateX(0) rotate(0);
|
||
|
|
transform-origin: center center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bubbleMover {
|
||
|
|
0% {
|
||
|
|
transform: translateY(0px) translateX(0) rotate(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
transform: translateY(30px) translateX(50px) rotate(15deg);
|
||
|
|
transform-origin: center center;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: translateY(50px) translateX(100px) rotate(45deg);
|
||
|
|
transform-origin: right bottom;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
transform: translateY(30px) translateX(50px) rotate(15deg);
|
||
|
|
transform-origin: left top;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateY(0px) translateX(0) rotate(0);
|
||
|
|
transform-origin: center center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes shapeMover {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: perspective(400px) rotate(0deg) translateZ(20px) translateY(20px) translateX(20px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes shapeMover {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: perspective(400px) rotate(0deg) translateZ(20px) translateY(20px) translateX(20px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@-webkit-keyframes shapeMover {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
|
||
|
|
transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
|
||
|
|
transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@keyframes shapeMover-2 {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
-webkit-transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
|
||
|
|
transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
|
||
|
|
transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.shape-mover {
|
||
|
|
-webkit-animation-name: shapeMover;
|
||
|
|
animation-name: shapeMover;
|
||
|
|
-webkit-animation-duration: 9s;
|
||
|
|
animation-duration: 9s;
|
||
|
|
-webkit-animation-timing-function: linear;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@-webkit-keyframes banner3Shake {
|
||
|
|
0% {
|
||
|
|
transform: rotate3d(0, 1, 0, 0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
transform: rotate3d(0, 0, 1, 5deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
transform: rotate3d(1, 0, 0, 0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
transform: rotate3d(0, 0, 1, 5deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: rotate3d(0, 1, 0, 0deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@keyframes banner3Shake {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate3d(0, 1, 0, 0deg);
|
||
|
|
transform: rotate3d(0, 1, 0, 0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 15deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 15deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: rotate3d(1, 0, 0, 0deg);
|
||
|
|
transform: rotate3d(1, 0, 0, 0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 15deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 15deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate3d(0, 1, 0, 0deg);
|
||
|
|
transform: rotate3d(0, 1, 0, 0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.banner-3-Shake {
|
||
|
|
-webkit-transform-origin: center bottom;
|
||
|
|
transform-origin: center bottom;
|
||
|
|
-webkit-animation-fill-mode: both;
|
||
|
|
animation-fill-mode: both;
|
||
|
|
-webkit-animation-name: banner3Shake;
|
||
|
|
animation-name: banner3Shake;
|
||
|
|
-webkit-animation-timing-function: ease-out;
|
||
|
|
animation-timing-function: ease-out;
|
||
|
|
-webkit-animation-duration: 5s;
|
||
|
|
animation-duration: 5s;
|
||
|
|
-webkit-animation-delay: 1s;
|
||
|
|
animation-delay: 1s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@-webkit-keyframes squareMover {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform: translate(0, 0) rotate(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
20%,
|
||
|
|
60% {
|
||
|
|
transform: translate(20px, 40px) rotate(180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
30%,
|
||
|
|
80% {
|
||
|
|
transform: translate(40px, 60px) rotate(0deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes squareMover {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform: translate(0, 0) rotate(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
20%,
|
||
|
|
60% {
|
||
|
|
transform: translate(20px, 40px) rotate(180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
30%,
|
||
|
|
80% {
|
||
|
|
transform: translate(40px, 60px) rotate(0deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes treeMove {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform: rotate(0deg) translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
25%,
|
||
|
|
75% {
|
||
|
|
transform: rotate(5deg) translateX(15px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: rotate(10deg) translateX(30px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes treeMove {
|
||
|
|
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform: rotate(0deg) translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
25%,
|
||
|
|
75% {
|
||
|
|
transform: rotate(5deg) translateX(15px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: rotate(10deg) translateX(30px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*--------------------------------------------------------------
|
||
|
|
# Zoom Fade Css
|
||
|
|
--------------------------------------------------------------*/
|
||
|
|
.zoom-fade {
|
||
|
|
animation-name: zoom-fade;
|
||
|
|
animation-duration: 5s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
|
||
|
|
-webkit-animation-name: zoom-fade;
|
||
|
|
-webkit-animation-duration: 5s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-moz-animation-name: zoom-fade;
|
||
|
|
-moz-animation-duration: 5s;
|
||
|
|
-moz-animation-iteration-count: infinite;
|
||
|
|
-moz-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-ms-animation-name: zoom-fade;
|
||
|
|
-ms-animation-duration: 5s;
|
||
|
|
-ms-animation-iteration-count: infinite;
|
||
|
|
-ms-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-o-animation-name: zoom-fade;
|
||
|
|
-o-animation-duration: 5s;
|
||
|
|
-o-animation-iteration-count: infinite;
|
||
|
|
-o-animation-timing-function: linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoom-fade {
|
||
|
|
0% {
|
||
|
|
transform: scale(0.9) translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: scale(1) translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: scale(0.9) translateX(-50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes zoom-fade {
|
||
|
|
0% {
|
||
|
|
transform: scale(0.9) translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: scale(1) translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: scale(0.9) translateX(-50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*--------------------------------------------------------------
|
||
|
|
# Zoom Fade 2 Css
|
||
|
|
--------------------------------------------------------------*/
|
||
|
|
.zoom-fade-2 {
|
||
|
|
animation-name: zoom-fade-2;
|
||
|
|
animation-duration: 8s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
|
||
|
|
-webkit-animation-name: zoom-fade-2;
|
||
|
|
-webkit-animation-duration: 8s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-moz-animation-name: zoom-fade-2;
|
||
|
|
-moz-animation-duration: 8s;
|
||
|
|
-moz-animation-iteration-count: infinite;
|
||
|
|
-moz-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-ms-animation-name: zoom-fade-2;
|
||
|
|
-ms-animation-duration: 8s;
|
||
|
|
-ms-animation-iteration-count: infinite;
|
||
|
|
-ms-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-o-animation-name: zoom-fade-2;
|
||
|
|
-o-animation-duration: 8s;
|
||
|
|
-o-animation-iteration-count: infinite;
|
||
|
|
-o-animation-timing-function: linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoom-fade-2 {
|
||
|
|
0% {
|
||
|
|
transform: scale(0.9) translateX(0) translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: scale(1) translateX(0) translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: scale(0.9) translateX(0) translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes zoom-fade-2 {
|
||
|
|
0% {
|
||
|
|
transform: scale(0.9) translateX(0) translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: scale(1) translateX(0) translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: scale(0.9) translateX(0) translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/*--------------------------------------------------------------
|
||
|
|
# Zoom Fade 3 Css
|
||
|
|
--------------------------------------------------------------*/
|
||
|
|
.zoom-fade-3 {
|
||
|
|
animation-name: zoom-fade-3;
|
||
|
|
animation-duration: 5s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
|
||
|
|
-webkit-animation-name: zoom-fade-3;
|
||
|
|
-webkit-animation-duration: 5s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-moz-animation-name: zoom-fade-3;
|
||
|
|
-moz-animation-duration: 5s;
|
||
|
|
-moz-animation-iteration-count: infinite;
|
||
|
|
-moz-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-ms-animation-name: zoom-fade-3;
|
||
|
|
-ms-animation-duration: 5s;
|
||
|
|
-ms-animation-iteration-count: infinite;
|
||
|
|
-ms-animation-timing-function: linear;
|
||
|
|
|
||
|
|
-o-animation-name: zoom-fade-3;
|
||
|
|
-o-animation-duration: 5s;
|
||
|
|
-o-animation-iteration-count: infinite;
|
||
|
|
-o-animation-timing-function: linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* custom animations */
|
||
|
|
|
||
|
|
@keyframes btnIconMove {
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg) translate(0px, 0px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: rotate(20deg) translate(10px, 0px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: rotate(0deg) translate(0px, 0px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@-webkit-keyframes ImgBounce {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(-30px);
|
||
|
|
transform: translateY(-30px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes ImgBounce {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translateY(0);
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translateY(-30px);
|
||
|
|
transform: translateY(-30px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.img-bounce {
|
||
|
|
-webkit-animation: ImgBounce 5s ease-in-out 0s infinite alternate;
|
||
|
|
animation: ImgBounce 5s ease-in-out 0s infinite alternate;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/** squares **/
|
||
|
|
|
||
|
|
@-moz-keyframessquares {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale(1);
|
||
|
|
transform: scale(1);
|
||
|
|
opacity: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
-webkit-transform: scale(1.24);
|
||
|
|
transform: scale(1.24);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale(2.1);
|
||
|
|
transform: scale(2.1);
|
||
|
|
opacity: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes squares {
|
||
|
|
0% {
|
||
|
|
-moz-transform: scale(1);
|
||
|
|
transform: scale(1);
|
||
|
|
opacity: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
-moz-transform: scale(1.24);
|
||
|
|
transform: scale(1.24);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-moz-transform: scale(2.1);
|
||
|
|
transform: scale(2.1);
|
||
|
|
opacity: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-o-keyframes squares {
|
||
|
|
0% {
|
||
|
|
-o-transform: scale(1);
|
||
|
|
transform: scale(1);
|
||
|
|
opacity: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
-o-transform: scale(1.24);
|
||
|
|
transform: scale(1.24);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-o-transform: scale(2.1);
|
||
|
|
transform: scale(2.1);
|
||
|
|
opacity: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes squares {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale(1);
|
||
|
|
-moz-transform: scale(1);
|
||
|
|
-o-transform: scale(1);
|
||
|
|
transform: scale(1);
|
||
|
|
opacity: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
-webkit-transform: scale(1.24);
|
||
|
|
-moz-transform: scale(1.24);
|
||
|
|
-o-transform: scale(1.24);
|
||
|
|
transform: scale(1.24);
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale(2.1);
|
||
|
|
-moz-transform: scale(2.1);
|
||
|
|
-o-transform: scale(2.1);
|
||
|
|
transform: scale(2.1);
|
||
|
|
opacity: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/***
|
||
|
|
=============================================
|
||
|
|
Float Bob X Animation Css
|
||
|
|
=============================================
|
||
|
|
***/
|
||
|
|
@-webkit-keyframes float-bob-x {
|
||
|
|
0% {
|
||
|
|
transform: translateX(-30px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: translateX(-10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateX(-30px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes float-bob-x {
|
||
|
|
0% {
|
||
|
|
transform: translateX(-30px);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: translateX(-10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateX(-30px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.float-bob-x {
|
||
|
|
-webkit-animation-name: float-bob-x;
|
||
|
|
animation-name: float-bob-x;
|
||
|
|
-webkit-animation-duration: 2s;
|
||
|
|
animation-duration: 2s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-timing-function: linear;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/***
|
||
|
|
=============================================
|
||
|
|
Float Bob Y Animation Css
|
||
|
|
=============================================
|
||
|
|
***/
|
||
|
|
@-webkit-keyframes float-bob-y-2 {
|
||
|
|
0% {
|
||
|
|
transform: translateY(-20px) translateX(-50%) rotate(0deg);
|
||
|
|
;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: translateY(-10px) translateX(-50%) rotate(0deg);
|
||
|
|
;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateY(-20px) translateX(-50%) rotate(0deg);
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes float-bob-y-2 {
|
||
|
|
0% {
|
||
|
|
transform: translateY(-20px) translateX(-50%) rotate(0deg);
|
||
|
|
;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: translateY(-10px) translateX(-50%) rotate(0deg);
|
||
|
|
;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateY(-20px) translateX(-50%) rotate(0deg);
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.float-bob-y-2 {
|
||
|
|
-webkit-animation-name: float-bob-y-2;
|
||
|
|
animation-name: float-bob-y-2;
|
||
|
|
-webkit-animation-duration: 2s;
|
||
|
|
animation-duration: 2s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-timing-function: linear;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
}
|