为什么我的动画不能正常工作？

Question

有人能帮助我吗？我在CodePen中重建了我的问题。

https://codepen.io/anon/pen/VWaXaO

.dog {
  animation-name: dog;
}

@keyframes dog {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

<img src="http://s7d2.scene7.com/is/image/PetSmart/PB0101_HERO-Dog-TreatsRawhide-20160818?$sclp-banner-main_large$" class="dog">

为什么图像上的动画不起作用？

感谢您的帮助。

Answer 1

至少，您需要指定DownloadResult。 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration

  

值为0，这是默认值，表示不应出现动画。

＆＃13;

＆＃13;

animation-duration

＆＃13;

.dog {
  animation-name: dog;
  animation-duration: 1s;
}
@keyframes dog {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

＆＃13;

＆＃13;

＆＃13;