Question

@keyframes fadeOutDownMed {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(150px);
    -ms-transform: translateY(150px);
    transform: translateY(150px);
  }
}

http://jsfiddle.net/iaezzy/99JbQ/

这是有效的，但动画是直截了当的，我需要它像\一样淡出倾斜，或者在任何可能的地方淡出某个元素，这可能吗？

由于

Answer 1

尝试将translateX附加到transform属性，如下所示：

@keyframes fadeOutDownMed {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0) translateX(0);
    -ms-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(150px) translateX(150);
    -ms-transform: translateY(150px) translateX(150);
    transform: translateY(150px) translateX(150);
  }
}

演示：http://jsfiddle.net/k7Wp4/

CSS自定义路径动画

1 个答案: