点滅アニメーションが突然動作を停止しました

Question

私は点滅Webkitフレームワークを使用して、私のウェブサイトのコンテンツを黄色/青色で点滅させます。 JS Binでコードをテストしたところ、何らかの理由でそれが機能しなくなりました。

多分私はコード内の何かを削除しましたか？ これは私を夢中にさせている!!

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;} 
} 

Answer 1

あなたは@-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