0

Is it possible to end CSS animation early, based on time in ms from the start, and still firing transitionend event?

The fiddle to start with

https://jsfiddle.net/Slava_B/4vLwtyxx/

EDIT: Transition duration and duration before early stop are calculated in JS right before transition start. Also in the real life case transition is triggered by applying inline style with JS. Don't know if that helps.

var animateEl = document.querySelector('.animate'),
    resultEl = document.querySelector('.result');

animateEl.addEventListener('transitionstart', function(e){
  window.animationStartTime = performance.now();
  resultEl.innerHTML = '';
})
animateEl.addEventListener('transitionend', function(e){
  resultEl.innerHTML = 'Animation took: '+ Math.round(performance.now()-window.animationStartTime) +'ms';
});
.parent{
  height:300px;
  box-shadow:0 -100px 0 0 rgb(255,150,150) inset, 0 -200px 0 0 rgb(150,255,150) inset;
}
.animate{
  height:100px;
  background-color:rgba(0,100,200,0.6);
  transition:height 2000ms cubic-bezier(0.645,0.045,0.355,1);
}
.animate:hover{
  height:300px;
}
<div class="parent">
  <div class="animate">
    We want to launch the animation for the duration of 2000ms, but prematurely end it for example after 1000ms. So it doesn't reach red zone.
  </div>
</div>
<p class="result"></p>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Slava
  • 2,887
  • 3
  • 30
  • 39
  • You can make use of animation CSS attribute and then within the keyframes at what percentage of completion you want it to halt/stop, you define the needed CSS styles. But you're actually retaining a state instead of actually stopping the animation. –  Dec 23 '17 at 23:03
  • @Highdef I've made an edit thanks to your comment that should clarify the real world use for this. Do you think keyframes may still play a part in the solution if the % is not known until right before animation start? Also there are multiple elements being animated simultaneously, will defining keyframes not break other elements transition? If not, could you make a fiddle to show how this will look? – Slava Dec 23 '17 at 23:18
  • Well, like you said if the % time isn't know right before the duration then keyframes won't be of any use since that would need to be dynamic and then the only solution would be to turn to javascript. –  Dec 23 '17 at 23:27
  • https://jsfiddle.net/nesohv7n/ (the animation stops at 1ms and doesnt come back up until hovered out) & https://jsfiddle.net/xw7wcw54/ (the animation stops and returns to initial position) are as far as the CSS abilities go. –  Dec 23 '17 at 23:33

1 Answers1

0

Highdef's comments suggest the best you can do with just CSS, although I don't understand the use case. Why have an animation that always stops halfway, when you could just define an animation that only goes halfway and let it run for half the time?

Using JavaScript it is possible at least to stop/ start animations and get their progress, but you might run in to issues of browser compatibility and complexity. You can easily disable transitions and animations, and you can use the CSSOM to determine progress in an animation and adapt accordingly. CSS Trick's has a great article, "Controlling CSS Animations and Transitions with JavaScript." In my opinion, it's a lot of work for not much gain.

Tom
  • 6,947
  • 7
  • 46
  • 76
  • Use case is animating an element to a new position and displaying a dialog when it lands. The animation duration and timing function are adjusted to provide smooth visual feedback to the user that the element is dropping into a certain location, even if it's outside of the viewport. Now if the drop location is far outside the viewport user does not see the largest part of the animation and just has to wait for a few seconds before the dialog appears. To prevent this, we want to end the animation as soon as the element leaves the viewport, but keeping the timings of the current fly-out effect. – Slava Dec 28 '17 at 10:09
  • @Alph.Dev If I understand correctly, have you taken a look at IntersectionObserver* There's also lightweight and effective Polyfills^ if you need better browser support. In any case, you could detect when the view is fully outside of the viewport, show the dialog, and cancel the animation (or since it's invisible to the user, just let it finish). * https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API ^ https://github.com/w3c/IntersectionObserver – Tom Dec 28 '17 at 15:47