117 lines
2.0 KiB
CSS
117 lines
2.0 KiB
CSS
/*Animations*/
|
|
|
|
.float {
|
|
-webkit-animation: float 7s infinite;
|
|
animation: float 7s infinite;
|
|
-webkit-transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
|
|
-o-transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
|
|
transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.2s;
|
|
}
|
|
|
|
.float:hover {
|
|
-webkit-animation-play-state: paused;
|
|
-moz-animation-play-state: paused;
|
|
-o-animation-play-state: paused;
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
.slide-top {
|
|
-webkit-animation: slide-in-top 1s;
|
|
animation: slide-in-top 1s;
|
|
}
|
|
|
|
.slide-left {
|
|
-webkit-animation: slide-in-left 1s;
|
|
animation: slide-in-left 1s;
|
|
}
|
|
|
|
@-webkit-keyframes float {
|
|
0% {
|
|
-webkit-transform: translateY(4px);
|
|
transform: translateY(4px);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: translateY(-4px);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(4px);
|
|
transform: translateY(4px);
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0% {
|
|
-webkit-transform: translateY(4px);
|
|
transform: translateY(4px);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: translateY(-4px);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(4px);
|
|
transform: translateY(4px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slide-in-left {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-30px);
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-left {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(-30px);
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slide-in-top {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-30px);
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-top {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-30px);
|
|
transform: translateY(-30px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|