So I'm using the blink webkit framework to make the content on my website flash in yellow/blue. I tested the code in JS Bin and it worked, but for some reason it's not working anymore.
Maybe I accidentally deleted something in the code? This is driving me crazy!!
body{
font-family: 'Jockey One', sans-serif;
font-size: 225px;
position: absolute;
left: 50%;
top: 50%;
-webkit-animation: blink 10s 2s;
animation: blink 10s 2s; transform: translate(-50%,-50%);
-moz-animation-duration: 100ms;
-moz-animation-name: blink;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-duration: 10000ms;
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-transition-timing-function: linear
animation-duration: 100ms;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
@-webkit-keyframes blink {
0% {color: blue;}
10% {color: yellow;}
20% {color: blue;}
29% {color: yellow;}
38% {color: blue;}
46% {color: yellow;}
54% {color: blue;}
61% {color: yellow;}
68% {color: blue;}
74% {color: yellow;}
80% {color: blue;}
85% {color: yellow;}
90% {color: blue;}
92% {color: yellow;}
94% {color: blue;}
96% {color: yellow;}
98% {color: blue;}
100% {color: yellow;}
}
You are missing a closing brace before @-webkit-keyframes
body {
font-family: 'Jockey One', sans-serif;
font-size: 225px;
position: absolute;
left: 50%;
top: 50%;
-webkit-animation: blink 10s 0s;
animation: blink 10s 0s;
transform: translate(-50%, -50%);
-moz-animation-duration: 100ms;
-moz-animation-name: blink;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-duration: 10000ms;
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-transition-timing-function: linear animation-duration: 100ms;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@-webkit-keyframes blink {
0% {color: blue;}
10% {color: yellow;}
20% {color: blue;}
29% {color: yellow;}
38% {color: blue;}
46% {color: yellow;}
54% {color: blue;}
61% {color: yellow;}
68% {color: blue;}
74% {color: yellow;}
80% {color: blue;}
85% {color: yellow;}
90% {color: blue;}
92% {color: yellow;}
94% {color: blue;}
96% {color: yellow;}
98% {color: blue;}
100% {color: yellow;}
}
TEST