Question

这个HTML元素在点击时有一个很好的过渡效果。但是，当我添加另一个具有animation属性的类时，转换已丢失。看看演示：http://codepen.io/kunokdev/pen/rewveJ

  <div
    class="main-menu-item zoom-in-entrance">
    Test
  </div>

animation和transition属性是否堆叠？

@keyframes zoom-in-entrance
  from
    opacity: 0
    -webkit-transform: scale3d(.3, .3, .3)
    transform: scale3d(.3, .3, .3)

  50%
    opacity: 1

.zoom-in-entrance
  -webkit-animation: zoom-in-entrance .25s forwards
  animation: zoom-in-entrance .25s forwards

.main-menu-item
  cursor: pointer
  background: $white
  transition: all .25s
  &:active
    +scale(0.95,0.95)
  i, span
    display: block

来自animation属性的动画仅在页面加载时发生，并且从不再发生，但是transition的动画仅在单击元素时发生。我如何使它们都起作用？

Answer 1

您的animation和transition属性都试图影响scale。这是因为您已将forwards指定为动画填充模式。

由于动画以项目的“默认”状态结束，您可以改为使用none，动画不会将scale保留在1.0，从而允许转换为生效：

-webkit-animation: zoom-in-entrance .25s none
animation: zoom-in-entrance .25s none

（您也可以省略none因为它是默认的填充模式）

更新了笔：http://codepen.io/anon/pen/XdgqNq

Answer 2

如果你删除了持久动画最终状态的forwards，它就能正常工作。

Answer 3

如果你可以使用js，你可以在动画结束后删除放大入门类。

Callback when CSS3 transition finishes

给定动画属性时，元素会失去转换

3 个答案: