/* @keyframes */ @-webkit-keyframes rotation360 { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);} } @keyframes rotation360 { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);} } @-webkit-keyframes clignote { 0% {opacity: 0}; 50% {opacity: 1}; 100%{opacity: 0}; } @keyframes clignote { 0% {opacity: 0}; 50% {opacity: 1}; 100%{opacity: 0}; } @-webkit-keyframes scale { 0% {-webkit-transform: scale(1);transform: scale(1);} 50% {-webkit-transform: scale(0.7);transform: scale(0.7);} 100% {-webkit-transform: scale(1);transform: scale(1);} } @keyframes scale { 0% {-webkit-transform: scale(1);transform: scale(1);} 50% {-webkit-transform: scale(0.7);transform: scale(0.7);} 100% {-webkit-transform: scale(1);transform: scale(1);} } @-webkit-keyframes pop { 0%{-webkit-transform: scale(0);transform: scale(0);} 25%{-webkit-transform: scale(1);transform: scale(1);} 55%{-webkit-transform: scale(1);transform: scale(1);} 80%{-webkit-transform: scale(0);transform: scale(0);} 100%{-webkit-transform: scale(0);transform: scale(0);} } @keyframes pop { 0%{-webkit-transform: scale(0);transform: scale(0);} 25%{-webkit-transform: scale(1);transform: scale(1);} 55%{-webkit-transform: scale(1);transform: scale(1);} 80%{-webkit-transform: scale(0);transform: scale(0);} 100%{-webkit-transform: scale(0);transform: scale(0);} } @-webkit-keyframes galop { 0% {-webkit-transform: translate(0);transform: translate(0);} 50% {-webkit-transform: translate(0px , -5px) ;transform: translate(0px , -5px) ;} 100% {-webkit-transform: translate(0);transform: translate(0);} } @keyframes galop { 0% {-webkit-transform: translate(0);transform: translate(0);} 50% {-webkit-transform: translate(0px , -5px) ;transform: translate(0px , -5px) ;} 100% {-webkit-transform: translate(0);transform: translate(0);} } @-webkit-keyframes battement { 0% {-webkit-transform: scale(1);transform: scale(1);} 50% {-webkit-transform: scale(1.1);transform: scale(1.1);} 100% {-webkit-transform: scale(1);transform: scale(1);} } @keyframes battement { 0% {-webkit-transform: scale(1);transform: scale(1);} 50% {-webkit-transform: scale(1.1);transform: scale(1.1);} 100% {-webkit-transform: scale(1);transform: scale(1);} } @-webkit-keyframes rotation_pouce { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 50% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);} 100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} } @keyframes rotation_pouce { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 50% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);} 100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} } @-webkit-keyframes balancelegs { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 25% {-webkit-transform: rotate(15deg);transform: rotate(15deg);} 50% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 75% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);} 100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} } @keyframes balancelegs { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 25% {-webkit-transform: rotate(15deg);transform: rotate(15deg);} 50% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 75% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);} 100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} } @-webkit-keyframes levitation { 0% {-webkit-transform: translate(0);transform: translate(0);} 10% {-webkit-transform: translate(0px , -20px) ;transform: translate(0px , -20px) ;} 20% {-webkit-transform: translate(-5px , -22px);transform: translate(-5px , -22px);} 50% {-webkit-transform: translate( 5px , -20px) ;transform: translate( 5px , -20px) ;} 70% {-webkit-transform: translate( -5px , -25px) ;transform: translate( -5px , -25px) ;} 100% {-webkit-transform: translate(0);transform: translate(0);} } @keyframes levitation { 0% {-webkit-transform: translate(0);transform: translate(0);} 10% {-webkit-transform: translate(0px , -20px) ;transform: translate(0px , -20px) ;} 20% {-webkit-transform: translate(-5px , -22px);transform: translate(-5px , -22px);} 50% {-webkit-transform: translate( 5px , -20px) ;transform: translate( 5px , -20px) ;} 70% {-webkit-transform: translate( -5px , -25px) ;transform: translate( -5px , -25px) ;} 100% {-webkit-transform: translate(0);transform: translate(0);} } /* appli keyframes */ #center #path89{ -webkit-animation: battement 1s linear infinite; animation: battement 1s linear infinite; -webkit-transform-origin: 90% 80%; transform-origin: 90% 80%; } #ampoule #rotate{ -webkit-animation: rotation360 1s linear infinite ; animation: rotation360 1s linear infinite ; -webkit-animation-delay: 0; animation-delay: 0; -webkit-transform-origin: 50% 34%; transform-origin: 50% 34%; } #angoisses text:nth-of-type(1){ -webkit-animation: clignote 1s infinite; animation: clignote 1s infinite; background-color: red!important; } #angoisses text:nth-of-type(2){ -webkit-animation: clignote 1s infinite; animation: clignote 1s infinite; -webkit-animation-delay: 0.33s; animation-delay: 0.33s; } #angoisses text:nth-of-type(3){ -webkit-animation: clignote 1s infinite; animation: clignote 1s infinite; -webkit-animation-delay: 0.66s; animation-delay: 0.66s; } #bah_alors svg path:nth-of-type(3){ -webkit-animation: scale 0.5s ease infinite; animation: scale 0.5s ease infinite; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } /* besoin */ #bulle1{ -webkit-animation: pop 5s infinite forwards; animation: pop 5s infinite forwards; -webkit-transform-origin: 70% 40%; transform-origin: 70% 40%; } #bulle2{ -webkit-animation: pop 5s infinite forwards; animation: pop 5s infinite forwards; -webkit-transform-origin: 70% 40%; transform-origin: 70% 40%; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } #bulle3{ -webkit-animation: pop 5s infinite forwards; animation: pop 5s infinite forwards; -webkit-transform-origin: 70% 40%; transform-origin: 70% 40%; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } #chevalier .illu{ -webkit-animation: galop 1s infinite forwards; animation: galop 1s infinite forwards; } #coeur .illu { -webkit-animation: battement 1s ease infinite; animation: battement 1s ease infinite; /* transform-origin: 50% 50%; */ } #etoile .illu svg{ -webkit-animation: rotation360 2s infinite forwards; animation: rotation360 2s infinite forwards; } #parlons_en svg path:nth-of-type(3){ -webkit-animation: scale 0.5s ease infinite; animation: scale 0.5s ease infinite; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } #pouce .illu svg{ -webkit-animation: rotation_pouce 1s infinite forwards; animation: rotation_pouce 1s infinite forwards; -webkit-transform-origin: 30% 70%; transform-origin: 30% 70%; } #sumo #jambes{ -webkit-animation: balancelegs 1s infinite; animation: balancelegs 1s infinite; -webkit-transform-origin: 35% 65%; transform-origin: 35% 65%; } #voyance #boule{ -webkit-animation: levitation 5s ease infinite; animation: levitation 5s ease infinite; }