234 lines
7.5 KiB
CSS
234 lines
7.5 KiB
CSS
/* @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;
|
|
}
|