Question

我对CSS3动画相当新，我was recently tasked with a freelance project我需要将this image设为动画标志。在查看了在codepen和JSFiddle上发布的示例之后，在我看来，最好的解决方案是将图像切片，我相信这就是你所说的，分成几个1px宽的元素，然后稍微动画一下关闭转换效果以创建挥动旗帜事件。

HTML：

  <div class="flag"></div>

CSS：

  .flag {
    width: 200px;
    height: 30px;
    margin: auto;
  }

.flag-element {
  -webkit-animation: oscill 2s ease-in-out infinite alternate;
  -moz-animation: oscill 2s ease-in-out infinite alternate;
  -ms-animation: oscill 2s ease-in-out infinite alternate;
  animation: oscill 2s ease-in-out infinite alternate;
  background: url('demo.svg');
  max-width: 100%;
  background-size: 200px 100%;
  position: relative;
  height: 100%;
  width: 1px;
  display: inline-block;
  outline: 1px solid rgba(255, 255, 255, 0);
}

@-webkit-keyframes oscill {
    100% {
   transform: translateY(3px);
    }
}

@-moz-keyframes oscill {
  100% {
  transform: translateY(3px) rotate(0.01deg);
  }
}
@-ms-keyframes oscill {
  100% {
  transform: translateY(3px);
  }
}
@keyframes oscill {
  100% {
  transform: translateY(3px) rotate(0.01deg);
  }
}

JQUERY：

$(window).on('load', function () {
var h = $('.flag').width();
for (var i = 0; i < h; i++) {
  var flagElement = $("<div class='flag-element'>");
  flagElement.css('background-position', -i + "px 0");
  flagElement.css('-webkit-animation-delay', i * 10 + 'ms');
  flagElement.css('-moz-animation-delay', i * 10 + 'ms');
  flagElement.css('-ms-animation-delay', i * 10 + 'ms');
  flagElement.css('animation-delay', i * 10 + 'ms');
  $('.flag').append(flagElement);
}
});

Live version

JSFiddle

该代码在Chrome，IE，Safari和Firefox中运行良好，动画流畅，应有尽有。但是，无论是在移动设备上还是在某些浏览器（如Firefox）上，当您开始放大图像（screencap）上出现白线时，似乎任何类型的转换效果都会导致这种情况。问题。值得注意的是，这并不是在所有浏览器中都会发生，例如，Chrome渲染比IE和Firefox更流畅，但有什么方法可以让用户放大时这些白线停止显示？

如果这是不可解决的，我也可以选择其他解决方案来为这个svg设置动画，就像标志一样。感谢。

CSS3挥动动画在放大时有白线

0 个答案: