反向CSS关键帧动画

时间:2019-05-10 10:05:44

标签: css svg css-animations keyframe

我已经使用svg路径的关键帧编写了一个CSS动画

path {
  animation: anim 1s linear;
  animation-fill-mode: forwards;
}

@keyframes anim {
  50% {
    d: path('M20 20 L 20 20');
  }
  100% {
    d: path('M10 10 L 30 30');
  }
}
<path class="top" d="M10 10 L 30 10" stroke-width="2" stroke="black" fill="transparent" />

Source

如果您单击svg,则可以看到正在播放的动画。现在,如果再次单击,我希望它动画到其原始状态。我尝试添加

transition: all 1s ease-out;

animation-direction: alternate;

但是仍然没有动画恢复到初始状态。

问题是,我该如何动画化?

1 个答案:

答案 0 :(得分:4)

通过过渡,您可以轻松地做到这一点,但是动画会略有不同:

const svg = document.querySelector('svg');

svg.addEventListener('click', () => {
  svg.classList.toggle('close');
});
svg {
  border: 1px solid blue;
}

svg path {
  transition: 0.2s all linear;
}

svg.close path.top {
  d: path('M10 10 L 30 30');
}

svg.close path.middle {
  d: path('M20 20 L 20 20');
}

svg.close path.bottom {
  d: path('M10 30 L 30 10');
}
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">

  <path class="top" d="M10 10 L 30 10" stroke-width="2" stroke="black" fill="transparent"/>
  <path class="middle" d="M10 20 L 30 20" stroke-width="2" stroke="black" fill="transparent"/>
  <path class="bottom" d="M10 30 L 30 30" stroke-width="2" stroke="black" fill="transparent"/>
</svg>

另一种想法是依靠animationiteration来实现运行infinite动画并在每次迭代时停止动画。

const svg = document.querySelector('svg');

const path = document.querySelector('svg path');

svg.addEventListener('click', () => {
  svg.classList.toggle('close');
});


path.addEventListener('animationiteration', () =>{
 svg.classList.toggle('close');
});
svg {
  border: 1px solid blue;
}


path.top {
  animation: close-top 0.2s linear infinite alternate;
}

path.middle {
  animation: close-middle 0.2s linear infinite alternate;
}

path.bottom {
  animation: close-bottom 0.2s linear infinite alternate;
}

svg:not(.close) path {
 animation-play-state: paused;
}

svg.close path {
 animation-play-state: running;
}

@keyframes close-top {
  50% {
    d: path('M20 20 L 20 20');
  }
  100% {
    d: path('M10 10 L 30 30');
  }
}

@keyframes close-middle {
  to {
    d: path('M20 20 L 20 20');
  }
}

@keyframes close-bottom {
  50% {
    d: path('M20 20 L 20 20');
  }
  100% {
    d: path('M10 30 L 30 10');
  }
}
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">

  <path class="top" d="M10 10 L 30 10" stroke-width="2" stroke="black" fill="transparent"/>
  <path class="middle" d="M10 20 L 30 20" stroke-width="2" stroke="black" fill="transparent"/>
  <path class="bottom" d="M10 30 L 30 30" stroke-width="2" stroke="black" fill="transparent"/>
</svg>

相关问题