@font-face {
font-family: 'YewBasturdNormal';
src: url('yewbasturd/YEWBN___-webfont.eot');
src: url('yewbasturd/YEWBN___-webfont.eot') format('embedded-opentype'), url('yewbasturd/YEWBN___-webfont.woff') format('woff'), url('yewbasturd/YEWBN___-webfont.ttf') format('truetype'), url('yewbasturd/YEWBN___-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@-webkit-keyframes background {
0% {
background: rgb(255, 255, 51);
/** Jaune **/
}
20% {
background: rgb(255, 153, 0);
/** Orange **/
}
40% {
background: rgb(255, 0, 0);
/** Rouge **/
}
60% {
background: rgb(51, 204, 0);
/** Vert **/
}
80% {
background: rgb(51, 102, 255);
/** Bleu **/
}
100% {
background: rgb(204, 51, 204);
/** Rose **/
}
}
@-moz-keyframes background {
0% {
background: rgb(255, 255, 51);
/** Jaune **/
}
20% {
background: rgb(255, 153, 0);
/** Orange **/
}
40% {
background: rgb(255, 0, 0);
/** Rouge **/
}
60% {
background: rgb(51, 204, 0);
/** Vert **/
}
80% {
background: rgb(51, 102, 255);
/** Bleu **/
}
100% {
background: rgb(204, 51, 204);
/** Rose **/
}
}
@-webkit-keyframes pedobear {
0% {
width: 1%;
-webkit-transform: scale(1) rotate(-15deg);
}
10% {
-webkit-transform: scale(1) rotate(15deg);
}
20% {
-webkit-transform: scale(1) rotate(-15deg);
}
30% {
-webkit-transform: scale(1) rotate(15deg);
}
40% {
-webkit-transform: scale(1) rotate(-15deg);
}
50% {
-webkit-transform: scale(1) rotate(5deg);
}
60% {
-webkit-transform: scale(1) rotate(-5deg);
}
70% {
-webkit-transform: scale(1) rotate(5deg);
}
80% {
-webkit-transform: scale(1) rotate(-5deg);
}
100% {
width: 20%;
-webkit-transform: scale(1) rotate(0deg);
}
}
@-moz-keyframes pedobear {
0% {
width: 1%;
-webkit-transform: scale(1) rotate(-15deg);
}
10% {
-webkit-transform: scale(1) rotate(15deg);
}
20% {
-webkit-transform: scale(1) rotate(-15deg);
}
30% {
-webkit-transform: scale(1) rotate(15deg);
}
40% {
-webkit-transform: scale(1) rotate(-15deg);
}
50% {
-webkit-transform: scale(1) rotate(5deg);
}
60% {
-webkit-transform: scale(1) rotate(-5deg);
}
70% {
-webkit-transform: scale(1) rotate(5deg);
}
80% {
-webkit-transform: scale(1) rotate(-5deg);
}
100% {
width: 20%;
-webkit-transform: scale(1) rotate(0deg);
}
}
@-webkit-keyframes bienvenue {
0% {
font-size: 0em;
}
70% {
font-size: 0em;
}
80% {
font-size: 2em;
}
100% {
font-size: 3em;
}
}
@-moz-keyframes bienvenue {
0% {
font-size: 0em;
}
70% {
font-size: 0em;
}
80% {
font-size: 2em;
}
100% {
font-size: 3em;
}
}
body {
width: 100%;
-webkit-animation-name: background;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
#container {
width: 100%;
margin: auto;
text-align: center;
}
#pedobear {
width: 20%;
-webkit-animation-name: pedobear;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
}
#texte {
margin-top: 1em;
font-size: 3em;
color: white;
font-family: 'YewBasturdNormal', Arial, sans-serif;
-webkit-animation-name: bienvenue;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
}