眨眼动画突然停止工作

Question

所以我正在使用 blink webkit 框架使我网站上的内容在 yellow/blue 中闪烁。我在 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

眨眼动画突然停止工作

blink animation suddenly stopped working

javascript

css

css-animations

webkit-animation