Is there a way to pause CSS transition mid-way?
css, javascript
Solution
1) You can use the `animation-play-state` CSS attribute, and toggle between
`animation-play-state:running`, and `animation-play-state:paused` https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
2) The short answer is yes. Whichever property you read halfway through your transition (lets say `height`), will return the current value at the moment queried.
Problem
Actually the subject is pretty explanatory. But to clarify, I am curious of several things: Is there a way - not to disable - but to pause the property transition? (And then - resume it, perhaps). Is there a way to read property change (by JavaScript) while it's in transition? For instance, will an `$(el).height()` return 50 after .5 seconds after the hover event, if the styles for el are: `el { height: 100px; transition: height 1s; }` and `el:hover { height: 0px; }` (it's a sketch, please pardon my syntax).