使用CSS在资源管理器中闪烁td

Question

我正在使用 CSS 类来眨眼 td

.blink {
    -webkit-animation-name: blink;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    -webkit-animation-duration: 1s;
}

但这在资源管理器中不起作用。任何人都可以帮助如何通过 CSS 实现闪烁。

Answer 1

您正在使用 -webkit 特定语法...IE 不能在 Webkit 上运行。

也使用无前缀版本。

.blink {
   -webkit-animation-name: blink;
           animation-name: blink;
   -webkit-animation-iteration-count: infinite;
           animation-iteration-count: infinite;
   -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
           animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
   -webkit-animation-duration: 1s;
           animation-duration: 1s;
}

Answer 2

就像你从这里看到的那样

link

属性动画在IE8/9上不起作用。 如果它不适用于 IE 10+，您可以使用此代码（我记得如果您使用前缀 css，您也必须声明一个不带 -prefix- 的属性），在您的代码中存在任何错误。 使用此代码应该可以在 IE10 和所有浏览器上运行。

.blink {
    -webkit-animation-name: blink;
    -ms-animation-name: blink;
    -o-animation-name: blink;
    animation-name: blink;
    -webkit-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -o-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    animation-duration: 1s;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    animation-duration: 1s;
    -ms-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

Answer 3

这是解决方案..

.blink {
   -webkit-animation-name: blink;
       animation-name: blink;
   -webkit-animation-iteration-count: infinite;
       animation-iteration-count: infinite;
   -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
       animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
   -webkit-animation-duration: 1s;
       animation-duration: 1s;
}

@keyframes blink {
 from {
    opacity: 1.0;
    }
 to {
    opacity: 0.0;
    }
}