/** * animation classes * * @author splitfire - http://splitfire.fr * @version 1.0 * * Animations utilisées pour le slider de la page d'accueil * */ // Animation top, element venant du haut @keyframes anim-top { 0% { opacity: 0; transform: translate(0px, -50px); } 100% { opacity: 1; transform: translate(0px, 0px); } } // Animation bottom, élement venant du bas @keyframes anim-bottom { 0% { opacity: 0; transform: translate(0px, 50px); } 100% { opacity: 1; transform: translate(0px, 0px); } } // Animation left, élement venant de la gaucher @keyframes anim-left { 0% { opacity: 0; transform: translate(-50px, 0px); } 100% { opacity: 1; transform: translate(0px, 0px); } } // Animation right, élement venant de la droite @keyframes anim-right { 0% { opacity: 0; transform: translate(50px, 0px); } 100% { opacity: 1; transform: translate(0px, 0px); } } // Animation de changement de couleur @keyframes anim-color { 0% { color: #5A5A5A; } 25% { color: $toolbarActionColor; } 50% { color: #5A5A5A; } 75% { color: $toolbarActionColor; } 100% { color: #5A5A5A; } } .slider-animation { opacity: 0; } .slider-animation.animation-top { // nom, duration, acceleration, delay, iteration, direction //animation: test 2s ease 0 1; animation: anim-top 1s ease; animation-delay: 0s; animation-fill-mode:forwards; } .slider-animation.animation-bottom { // nom, duration, acceleration, delay, iteration, direction //animation: test 2s ease 0 1; animation: anim-bottom 1s ease; animation-delay: 0s; animation-fill-mode:forwards; } .slider-animation.animation-left { // nom, duration, acceleration, delay, iteration, direction //animation: test 2s ease 0 1; animation: anim-left 1s ease; animation-delay: 0.5s; animation-fill-mode:forwards; } .slider-animation.animation-right { // nom, duration, acceleration, delay, iteration, direction //animation: test 2s ease 0 1; animation: anim-right 1s ease; animation-delay: 0.5s; animation-fill-mode:forwards; } .slider-animation.animation-first { animation-delay: 0.5s; } .slider-animation.animation-fast { animation-delay: 0s; } .slider-animation.animation-slow { animation-delay: 0.5s; }