眨眼動畫突然停止工作

Question

因此，我使用blink 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