HTTP和HTTPS协议下的CSS动画差异

检查上面的代码，假设

div

的

opacity

在开始时为1。在Safari中，这两个动画在HTTP和HTTPS协议下的行为不同

在HTTP协议下，

div

的

opacity

将首先由于关键帧

resetFade

而变为0，然后在关键帧

淡入

延迟250毫秒后，

不透明度将从0变为1

在此过程中，当关键帧以300ms的速度完成
重置淡入
时，它不会影响从0恢复到1的不透明度，因为关键帧
淡入
仍在进行中

但是，在HTTPS协议下，当keyframe
resetFade
完成时，它会将
不透明度
从0恢复到1，这看起来像是一个闪烁，因为keyframe
淡入
仍在制作
不透明度
从0到1的动画过程中

很难理解为什么HTTP和HTTPS会对呈现产生影响。有人对此有什么见解吗？
关键帧现在得到了很好的支持，但您仍然依赖专有的webkit实现。每个-webkit-指令都应该遵循（现在是标准的）实现，方法是删除-webkit-。这将允许需要使用webkit版本的浏览器以及支持该标准的浏览器使用该版本。您的问题可能与webkit实现有关。“很难理解为什么HTTP和HTTPS会影响呈现”——它不应该有任何影响。您是否检查了控制台以查看是否有任何外部资源被阻止？否则，除非您展示一个我们可以比较HTTP和HTTPS版本的实例，否则这很难重现。
@-webkit-keyframes resetFade{0{opacity:0}100%{opacity:0}}
@-webkit-keyframes fade-in{0{opacity:0}50%{opacity:.5}100%{opacity:1}}
#div1 {-webkit-animation:resetFade 300ms ease-in 0ms 1, fade-in 300ms ease-in 250ms 1}