How to Listen to the End of a Bootstrap Animation

Is that a way to skip css3 animation at shown?

You could use the solution you thought about with the :not(:hover) and simply cancel the animation with:

input[type=checkbox]:not(:hover) ~ .mycheck {
animation: none;
}

or, and I think it is the best solution here, don't use animations, and use transitions instead. That would result in something like that (assuming you're animating the opacity) :

input[type=checkbox] ~ .mycheck {
opacity: 0;
transition: opacity .3s ease-out;
}

input[type=checkbox]:checked ~ .mycheck {
opacity: 1;
}

Also, depending on the browsers support you want to achieve, mind the vendor prefixes, as Chrome only recently dropped them on the transition property

EDIT: After some testing, I've come to think using only the :focus pseudo-class should be enough:

input[type=checkbox]:focus ~ .mycheck {
animation: uncheck 300ms ease-out forwards;
}
input[type=checkbox]:focus:checked ~ .mycheck {
animation: check 300ms ease-out forwards;
}

The only drawback i can see is when the checkbox loses focus, the animation may get canceled

CSS Animation and Display None

CSS (or jQuery, for that matter) can't animate between display: none; and display: block;. Worse yet: it can't animate between height: 0 and height: auto. So you need to hard code the height (if you can't hard code the values then you need to use javascript, but this is an entirely different question);

#main-image{
height: 0;
overflow: hidden;
background: red;
-prefix-animation: slide 1s ease 3.5s forwards;
}

@-prefix-keyframes slide {
from {height: 0;}
to {height: 300px;}
}

You mention that you're using Animate.css, which I'm not familiar with, so this is a vanilla CSS.

You can see a demo here: http://jsfiddle.net/duopixel/qD5XX/

Toggling between classes keeps animation from going through, just skips to end

Here's how to do it using simple prop value changes with careful timing. I guess it can be done using @keyframe animations as well, but I find them more difficult to follow/control/sync, at least in this case, considering it's (basically) a two-step animation.

document.querySelector('.mobile-menu').addEventListener('click', ({
target
}) => {
target.closest('.mobile-menu').classList.toggle('menu-open');
})
.mobile-menu {
--duration: 0.42s;
--size: 3rem;
--padding: 0.5rem;
--color: red;
--distance-timing: cubic-bezier(0.5, 0, 0.3, 1);
--rotation-timing: cubic-bezier(0.4, 0, 0.2, 1);
width: var(--size);
height: var(--size);
padding: var(--padding);
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}

.mobile-menu * {
box-sizing: border-box;
}

.mobile-menu>div {
border: 1px solid var(--color);
height: 0;
width: 100%;
position: relative;
transform-origin: 50% 50%;
transition:
top calc(0.6 * var(--duration)) var(--distance-timing) calc(0.4 * var(--duration)),
bottom calc(0.6 * var(--duration)) var(--distance-timing) calc(0.4 * var(--duration)),
transform calc(0.8 * var(--duration)) var(--rotation-timing) 0s;
}

.mobile-menu> :nth-child(1) {
top: calc(var(--padding)/2);
}

.mobile-menu> :nth-child(3) {
bottom: calc(var(--padding)/2);
}

.mobile-menu.menu-open>div {
transition:
top calc(0.4 * var(--duration)) var(--distance-timing) 0s,
bottom calc(0.4 * var(--duration)) var(--distance-timing) 0s,
transform calc(0.8 * var(--duration)) var(--rotation-timing) calc(0.2 * var(--duration));
}

.mobile-menu.menu-open> :nth-child(1) {
top: calc(50% - 1px);
transform: rotate(0.125turn);
}

.mobile-menu.menu-open> :nth-child(2) {
transform: rotate(0.125turn);
}

.mobile-menu.menu-open> :nth-child(3) {
bottom: calc(50% - 1px);
transform: rotate(-0.125turn);
}
<div class="mobile-menu">
<div></div>
<div></div>
<div></div>
</div>

How to play reverse keyframe animation for hover off?

As I had indicated in comments to the question, producing the reverse effect of an animation is always complex. It is not impossible but just that it requires extra coding (like extra keyframes) and tweaking of all related properties to achieve a perfect effect.

Using transition is the best option if there is a need to achieve the reverse effect also. It is perfectly possible to produce the effect that you are after using transitions and it is all very similar to how you'd do it with animations. In the :hover selector, apply the transition setting such that :first-child has a lower delay than the second (and subsequent children) so that it appears first and in the default selector apply the transition setting such that the :first-child has a higher delay than the rest.

Using transitions would also avoid the animation being shown on page load itself. This is because the transitions only happen when there is a state change from one to another.

body {  background: #f1f1f1;}
ul { height: 100px; position: relative; background: #fff;}ul li { display: block; float: left; margin: 0; list-style-type: none; padding: 0;}ul li a { display: block; height: 100px; line-height: 100px; padding: 0 20px;}ul li ul { position: absolute; left: 0px; right: 0px; top: 100px; height: 0px; opacity: 0; visibility: hidden; transition: all 1s 0.5s;}ul li ul li { position: absolute; left: 50px; bottom: 0px; width: 200px; overflow: hidden; height: 100px;}ul li ul li a { display: block; height: 100px; background: red; padding: 0 20px; position: absolute; opacity: 0; transform: translate(0px, 100px); transition: all 1s 0.2s;}ul li ul li:first-child a { transition-delay: 0.4s;}ul li ul li:last-child { left: 250px;}ul li ul li:last-child a { transition-delay: 0.2s;}ul li:hover ul { height: 100px; opacity: 1; visibility: visible; transition: all 1s 0s;}ul li:hover ul li a { opacity: 1; transform: translate(0px, 0px); transition: all 1s 0.2s;}ul li:hover ul li:last-child a { transition-delay: 0.4s;}
<ul>  <li>    <a href="#">Dropdown</a>    <ul>      <li><a href="">First</a></li>      <li><a href="">second</a></li>    </ul>  </li>  <li><a href="">Not dropdown</a></li></ul>

Can't stop animation at end of one cycle

The following comment worked for me. Thanks michael

"You need to add the fill-mode to freeze the animation state at the end of the animation.

-webkit-animation-fill-mode: forwards;

forwards leaves the animation in the state of the last frame

backwards leaves the animation at the start



Related Topics



Leave a reply



Submit