Файловый менеджер

Файловый менеджер - Редактировать - /home/harasnat/www/sommer/templates/shaper_helixultimate/scss/animation.scss

Назад
@keyframes spFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes spFadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes spFadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes spZoomIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 1; } } @keyframes spRotateIn { from { transform-origin: center; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { transform-origin: center; transform: none; opacity: 1; } } @keyframes spPulse { from { opacity: 0; transform: scale3d(1, 1, 1); } 50% { opacity: 0.5; transform: scale3d(1.05, 1.05, 1.05); } to { opacity: 1; transform: scale3d(1, 1, 1); } } @keyframes spSpin { to { transform: rotate(360deg); } } /* Preloader animations */ // loader keyframes // Clock Loader Animation @-webkit-keyframes grdAiguille { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes grdAiguille { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes ptAiguille { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes ptAiguille { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } // Circle Loader Animation @-webkit-keyframes loader1 { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes loader1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } // Bubble Loop Loader Animation @-webkit-keyframes loader6 { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(180deg); } } @keyframes loader6 { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } } // Ring Loader Animation @keyframes rotate-360 { from { -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } // Audio Wave Loader Animation @keyframes audioWave { 25% { background: linear-gradient($link_color, $link_color) 0 50%, linear-gradient($link_color, $link_color) 0.625em 50%, linear-gradient($link_color, $link_color) 1.25em 50%, linear-gradient($link_color, $link_color) 1.875em 50%, linear-gradient($link_color, $link_color) 2.5em 50%; background-repeat: no-repeat; background-size: 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em; } 37.5% { background: linear-gradient($link_color, $link_color) 0 50%, linear-gradient($link_color, $link_color) 0.625em 50%, linear-gradient($link_color, $link_color) 1.25em 50%, linear-gradient($link_color, $link_color) 1.875em 50%, linear-gradient($link_color, $link_color) 2.5em 50%; background-repeat: no-repeat; background-size: 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em; } 50% { background: linear-gradient($link_color, $link_color) 0 50%, linear-gradient($link_color, $link_color) 0.625em 50%, linear-gradient($link_color, $link_color) 1.25em 50%, linear-gradient($link_color, $link_color) 1.875em 50%, linear-gradient($link_color, $link_color) 2.5em 50%; background-repeat: no-repeat; background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em; } 62.5% { background: linear-gradient($link_color, $link_color) 0 50%, linear-gradient($link_color, $link_color) 0.625em 50%, linear-gradient($link_color, $link_color) 1.25em 50%, linear-gradient($link_color, $link_color) 1.875em 50%, linear-gradient($link_color, $link_color) 2.5em 50%; background-repeat: no-repeat; background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em; } 75% { background: linear-gradient($link_color, $link_color) 0 50%, linear-gradient($link_color, $link_color) 0.625em 50%, linear-gradient($link_color, $link_color) 1.25em 50%, linear-gradient($link_color, $link_color) 1.875em 50%, linear-gradient($link_color, $link_color) 2.5em 50%; background-repeat: no-repeat; background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em; } } // Circle 2 Loader Animation @-webkit-keyframes effect-2 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes effect-2 { from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } // Audio Wave Loader 2 animation @keyframes sequence1 { 0% { height: 10px; } 50% { height: 50px; } 100% { height: 10px; } } @keyframes sequence2 { 0% { height: 20px; } 50% { height: 65px; } 100% { height: 20px; } } @keyframes rot1 { 100% { transform: skew(-10deg) translateX(50px) rotate(405deg); } } @-webkit-keyframes rot1 { 100% { -webkit-transform: skew(-10deg) translateX(50px) rotate(405deg); } } @keyframes rot2 { 100% { transform: skew(-10deg) rotate(525deg); } } @-webkit-keyframes rot2 { 100% { -webkit-transform: skew(-10deg) rotate(525deg); } } @keyframes rot3 { 100% { transform: skew(-10deg) translateX(20px) translateY(-50px) rotate(645deg); } } @-webkit-keyframes rot3 { 100% { -webkit-transform: skew(-10deg) translateX(20px) translateY(-50px) rotate(645deg); } } @keyframes width { 10% { width: 10%; } 20% { width: 20%; } 30% { width: 30%; } 40% { width: 40%; } 50% { width: 50%; } 60% { width: 60%; } 70% { width: 70%; } 80% { width: 80%; } 90% { width: 90%; } 100% { width: 100%; } }

| ver. 1.4 | Github | .