100 lines
5.7 KiB
CSS
100 lines
5.7 KiB
CSS
/* Animations */
|
|
|
|
.animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
|
|
.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
|
|
.animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
|
|
.animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
|
|
.animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
|
|
.animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
|
|
.animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
|
|
.animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
|
|
|
|
/* Animate Zoom */
|
|
|
|
.animate-zoom-1 {animation:animatezoom 0.3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
|
|
.animate-zoom-2 {animation:animatezoom 0.5s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
|
|
.animate-zoom-3 {animation:animatezoom 0.7s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
|
|
.animate-zoom-4 {animation:animatezoom 0.9s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
|
|
.animate-zoom-5 {animation:animatezoom 1.1s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
|
|
.animate-zoom-6 {animation:animatezoom 1.3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
|
|
.animate-zoom-7 {animation:animatezoom 1.5s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
|
|
.animate-zoom-8 {animation:animatezoom 1.7s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
|
|
.animate-zoom-9 {animation:animatezoom 1.9s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
|
|
|
|
/* Animate Top */
|
|
|
|
.animate-top-1{position:relative;animation:animatetop 0.3s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
|
|
.animate-top-2{position:relative;animation:animatetop 0.5s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
|
|
.animate-top-3{position:relative;animation:animatetop 0.7s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
|
|
.animate-top-4{position:relative;animation:animatetop 0.9s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
|
|
.animate-top-5{position:relative;animation:animatetop 1.1s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
|
|
.animate-top-6{position:relative;animation:animatetop 1.3s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
|
|
.animate-top-7{position:relative;animation:animatetop 1.5s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
|
|
.animate-top-8{position:relative;animation:animatetop 1.7s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
|
|
.animate-top-9{position:relative;animation:animatetop 1.9s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
|
|
|
|
/* Animate Bottom */
|
|
|
|
.animate-bottom-1{position:relative;animation:animatebottom 0.3s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
|
|
.animate-bottom-2{position:relative;animation:animatebottom 0.5s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
|
|
.animate-bottom-3{position:relative;animation:animatebottom 0.7s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
|
|
.animate-bottom-4{position:relative;animation:animatebottom 0.9s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
|
|
.animate-bottom-5{position:relative;animation:animatebottom 1.1s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
|
|
.animate-bottom-6{position:relative;animation:animatebottom 1.3s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
|
|
.animate-bottom-7{position:relative;animation:animatebottom 1.5s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
|
|
.animate-bottom-8{position:relative;animation:animatebottom 1.7s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
|
|
.animate-bottom-9{position:relative;animation:animatebottom 1.9s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
|
|
|
|
/* Zoom Box */
|
|
|
|
.zoom-box {
|
|
-webkit-transition: -webkit-transform 0.2s;
|
|
transition: -webkit-transform 0.2s;
|
|
transition: transform 0.2s;
|
|
transition: transform 0.2s, -webkit-transform 0.2s;
|
|
}
|
|
|
|
.zoom-box:hover {
|
|
-webkit-transform: scale(1.05);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Hide on phone */
|
|
|
|
@media (max-width: 576px) {
|
|
.element {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* Gradient Text */
|
|
|
|
.text-gradient {
|
|
background: linear-gradient(to right, rgba(22,91,189,1) 0%, rgba(144,30,254,1) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Shake */
|
|
|
|
.shake:hover {
|
|
animation: shake 0.5s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0% { transform: translate(1px, 1px) rotate(0deg); }
|
|
10% { transform: translate(-1px, -2px) rotate(-1deg); }
|
|
20% { transform: translate(-3px, 0px) rotate(1deg); }
|
|
30% { transform: translate(3px, 2px) rotate(0deg); }
|
|
40% { transform: translate(1px, -1px) rotate(1deg); }
|
|
50% { transform: translate(-1px, 2px) rotate(-1deg); }
|
|
60% { transform: translate(-3px, 1px) rotate(0deg); }
|
|
70% { transform: translate(3px, 1px) rotate(-1deg); }
|
|
80% { transform: translate(-1px, -1px) rotate(1deg); }
|
|
90% { transform: translate(1px, 2px) rotate(0deg); }
|
|
100% { transform: translate(1px, -2px) rotate(-1deg); }
|
|
}
|