CSS
@import url(https://fonts.googleapis.com/css?family=Monoton|Caveat|);
@-webkit-keyframes turnonlights {
0% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 2px #38eeff; }
1% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 1px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de}
4% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 1px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de}
7% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 2px #38eeff; }
8% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 1px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de}
12% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; }
22% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; }
34% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
36% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; }
42% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de}
55% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
60% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; }
63% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
67% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; }
84% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
86% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; }
96% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de}
100% { text-shadow: 2px 2px 15px rgba(0,0,0,0.9), 10px 0px 50px
#b30059, 0 0 10px #38eeff, 0 0 50px #38eeff;
color:#b30059;
}
}
@-moz-keyframes turnonlights {
0% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 2px #38eeff; }
1% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 1px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de}
4% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 1px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de}
7% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 2px #38eeff; }
8% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 1px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de}
12% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; }
22% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; }
34% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
36% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; }
42% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de}
55% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
60% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; }
63% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
67% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; }
84% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
86% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; }
96% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de}
100% { text-shadow: 2px 2px 15px rgba(0,0,0,0.3), 0 0px 15px
#b30059, 0 0 10px #38eeff, 0 0 50px #38eeff;
color:#b30059;
}
}
body {
background-color:#111;
font-family: 'Caveat', Helvetica, Arial, sans-serif;
}
.content #switch {
padding-left:45%;
font-size: 32px;
font-family:'Caveat';
cursor:pointer;
text-align: center;
color: #b30059;
}
.content {
position:relative;
}
#lights{
font-size:100px;
text-align:center;
color:#000;
}
#trav{
font-family: 'Monoton', cursive;
-webkit-animation: blink 0.1s infinite alternate;
-moz-animation: blink 0.1s infinite alternate;
-o-animation: blink 0.1s infinite alternate;
animation: blink 0.1s infinite alternate;
}
#fade {
font-family: 'Monoton', cursive;
opacity: 0.7;
-webkit-animation: fade 0.1s infinite reverse;
-moz-animation: fade 0.1s infinite reverse;
-o-animation: fade 0.1s infinite reverse;
animation: fade 0.1s infinite reverse;
}
@-webkit-keyframes blink {
45% {
opacity: 0.5;
}
}
@-o-keyframes blink {
70% {
opacity: 0.7;
}
}
@keyframes blink {
70% {
opacity: 0.7;
}
}
@-moz-keyframes fade {
40% {
opacity: 0.8;
}
42% {
opacity: 0.1;
}
43% {
opacity: 0.8;
}
45% {
opacity: 0.1;
}
46% {
opacity: 0.8;
}
}
@-webkit-keyframes fade {
40% {
opacity: 0.8;
}
42% {
opacity: 0.1;
}
43% {
opacity: 0.8;
}
45% {
opacity: 0.1;
}
46% {
opacity: 0.8;
}
}
@-o-keyframes fade {
40% {
opacity: 0.8;
}
42% {
opacity: 0.1;
}
43% {
opacity: 0.8;
}
45% {
opacity: 0.1;
}
46% {
opacity: 0.8;
}
}
@keyframes fade {
40% {
opacity: 0.8;
}
42% {
opacity: 0.1;
}
43% {
opacity: 0.8;
}
45% {
opacity: 0.1;
}
46% {
opacity: 0.8;
}
}
.animate {
text-align: center;
font-family: 'Caveat', Helvetica, Arial, sans-serif;
font-size: 100px;
-webkit-animation-name: turnonlights;
-webkit-animation-duration: 3.0s;
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: steps(2, start);
-moz-animation-name: turnonlights;
-moz-animation-duration: 3.0s;
-moz-animation-fill-mode: both;
-moz-animation-timing-function: steps(2, start);
}
