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
Position Div Center Horizontal and Vertical
CSS Animated Circles - Stop Center Content from Rotating
Less Class Name String Interpolation Not Working
Hide Columns in a Table Using CSS
Compass 1.0 Doesn't Use All Prefixes for Flexbox
Why Is "-Fx-Background-Radius: 10;" Not Working
Bootstrap 4.0 - Two Navbars That Collapse into One Toggle
How to Make an Irregular <Div> Shape Using Only CSS
Overriding Body Background Color in Angular 7
Make Divs of Different Heights Fill Vertical Space on New Line
Font Awesome 5 Pseudo-Class Not Working with My Kit
CSS - Increasing Size of Holder or What Ever Its Called
When I Float the Div to the Right the Screen Messes Up...I'Ve Tried Clear and Some Other Options