No, there is no way to restart the animation using CSS alone. You’d have to use JavaScript to remove the animation from the element and then re-apply it to the element (after a delay) for it to restart. The below is what the W3C’s CSS3 Animation Spec says (in a different context, but the point … Read more
This can be achieved by defining variables using (as of writing this, not well-supported) @property, which allows declaring types and that allows the browser to “understand”, for example, that a certain property (variable) is a Number and then it can gradually animate/transition that variable. Example Code: @property –opacity { syntax: ‘<number>’; /* <- defined as … Read more
flex-grow is animatable but only if the value is a <number>. However it seems that Google Chrome (v41) doesn’t trigger the animation if the value is set to 0. A workaround for this could be to use a very small value instead — something like 0.0001: Updated example. $(“.item”).click(function() { $(“.item”).addClass(“collapse”); $(this).removeClass(“collapse”); }); html, body … Read more
This would be trivially easy if only CSS or SVG had conical gradients! Until the conic-gradient() notation matures and gains support, we can approximate the effect by slicing up the gradient and covering the seams somehow. Below you will find two solutions. The first solution uses an embedded SVG image; the second uses multiple CSS … Read more
Here are four different versions to supplement @misterManSam’s brilliant answer. 1. With Easing Explanation If you filled up a circular bowl full of liquid, it would fill faster at the bottom and top than it would in the middle (because there is more area to cover in the wider middle section). So, with that crude … Read more
2018 Update Now you can use just window.scrollTo({ top: 0, behavior: ‘smooth’ }) to get the page scrolled with a smooth effect. const btn = document.getElementById(‘elem’); btn.addEventListener(‘click’, () => window.scrollTo({ top: 400, behavior: ‘smooth’, })); #x { height: 1000px; background: lightblue; } <div id=’x’> <button id=’elem’>Click to scroll</button> </div> Older solutions You can do something … Read more
You can use the SMIL animation of SVG. The idea is to animate the color-stop or the offset of the gradient to create the needed effect: svg { border:1px solid; width:200px; } <svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” viewBox=”10 10 24 24″> <defs> <linearGradient id=”linear-gradient” x1=”-100%” y1=”0″ x2=”200%” y2=”0″ > <stop offset=”0″ stop-color=”red”> <animate attributeName=”offset” values=”0;0.2;0.5″ dur=”2s” repeatCount=”indefinite” … Read more
As discussed in comments there is currently no way to force an animation to complete one full cycle even after the selector rule which originally applied the animation is no longer applicable. The only way to achieve this is by using scripting. Below is a sample snippet using JavaScript. What this does is to add … Read more
Try adding animation-fill-mode: forwards;. For example, the shorthand would be used like this: -webkit-animation: bubble 1.0s forwards; /* for less modern browsers */ animation: bubble 1.0s forwards;
I always set preload class to body with animation time value 0 and its working pretty well. I have some back going transitions so I have to remove load animation to them too. I solved this by temporary setting animation time to 0. You can change transitions to match yours. HTML … <body class=”preload”>… CSS … Read more