@font-face{
font-family: introFont;
src: url(charmset/Charmset.ttf);
}
body{
background:black;
margin: 0;
padding: 0;
}
plasma {
margin: 0 auto;
z-index: 0;
}
marquee {
font-family: introFont;
font-size: 72px;
color: white;
text-shadow: 2px 10px 4px #000000;
opacity: 0.89;
overflow-x: hidden;
position: absolute;
z-index: 100;
width: inherit;
top: 50%;
white-space: nowrap;
transform: translate(0%, -50%);
}
text {
/* Starting position */
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
/* Apply animation to this element */
-moz-animation: demo-1 8s linear 1;
-webkit-animation: demo-1 8s linear 1;
animation: demo-1 8s linear 1;
}
/* Move it (define the animation) */
@-moz-keyframes demo-1 {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-200%);
}
}
@-webkit-keyframes demo-1 {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-200%);
}
}
@keyframes demo-1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-200%); /* Firefox bug fix */
-webkit-transform: translateX(-200%); /* Firefox bug fix */
transform: translateX(-200%);
}
}