153 lines
2.9 KiB
CSS
153 lines
2.9 KiB
CSS
|
|
#tada {
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: block;
|
|
position: relative;
|
|
margin: auto;
|
|
font-size: 16px;
|
|
-webkit-animation-name: tada;
|
|
-webkit-animation-duration: 1s;
|
|
-webkit-animation-iteration-count: 1;
|
|
animation-name: tada;
|
|
animation-duration: 1s;
|
|
animation-iteration-count: 1;
|
|
}
|
|
|
|
.msginfo {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: auto;
|
|
top: 5%;
|
|
margin-left: 5%;
|
|
margin-bottom: 0%;
|
|
text-align: center;
|
|
width: 90%;
|
|
|
|
-webkit-animation-name: apparition;
|
|
-webkit-animation-duration: 0.2s;
|
|
-webkit-animation-iteration-count: 1;
|
|
animation-name: apparition;
|
|
animation-duration: 0.2s;
|
|
animation-iteration-count: 1;
|
|
}
|
|
|
|
.flashed {
|
|
list-style-type: none;
|
|
position: center;
|
|
margin: auto;
|
|
margin-top: 5%;
|
|
width: 50%;
|
|
|
|
}
|
|
|
|
.flashed p {
|
|
font-family: sans-serif;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
/*box-shadow: 1px 1px 1px black; */
|
|
}
|
|
|
|
.succes p {
|
|
background-color: #CDCBD0;
|
|
color: #00A310;
|
|
}
|
|
|
|
.error p {
|
|
background-color: #CDCBD0;
|
|
color: #B80000;
|
|
}
|
|
|
|
#majuscule {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
#fic {
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
|
|
/* ######### Animations ######### */
|
|
|
|
@-webkit-keyframes apparition {
|
|
0% {opacity: 0; }
|
|
100% {opacity: 1; }
|
|
}
|
|
|
|
@keyframes apparition {
|
|
0% {opacity: 0; }
|
|
100% {opacity: 1; }
|
|
}
|
|
|
|
@-webkit-keyframes disparition {
|
|
100% {opacity: 0; }
|
|
0% {opacity: 1; display: none; }
|
|
}
|
|
|
|
@keyframes disparition {
|
|
100% {opacity: 0; }
|
|
0% {opacity: 1; display: none; }
|
|
}
|
|
|
|
@-webkit-keyframes tada {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
10%, 20% {
|
|
-webkit-transform: scale(0.9) rotate(-3deg);
|
|
transform: scale(0.9) rotate(-3deg);
|
|
}
|
|
|
|
30%, 50%, 70%, 90% {
|
|
-webkit-transform: scale(1.1) rotate(3deg);
|
|
transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
40%, 60%, 80% {
|
|
-webkit-transform: scale(1.1) rotate(-3deg);
|
|
transform: scale(1.1) rotate(-3deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1) rotate(0);
|
|
transform: scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
@keyframes tada {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
-ms-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
10%, 20% {
|
|
-webkit-transform: scale(0.9) rotate(-3deg);
|
|
-ms-transform: scale(0.9) rotate(-3deg);
|
|
transform: scale(0.9) rotate(-3deg);
|
|
}
|
|
|
|
30%, 50%, 70%, 90% {
|
|
-webkit-transform: scale(1.1) rotate(3deg);
|
|
-ms-transform: scale(1.1) rotate(3deg);
|
|
transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
40%, 60%, 80% {
|
|
-webkit-transform: scale(1.1) rotate(-3deg);
|
|
-ms-transform: scale(1.1) rotate(-3deg);
|
|
transform: scale(1.1) rotate(-3deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1) rotate(0);
|
|
-ms-transform: scale(1) rotate(0);
|
|
transform: scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
/* ######### Animations ######### */
|
|
|