After hours of googling: No, it’s not possible without JavaScript. The animation-iteration-count: 1; is internally saved in the animation shothand attribute, which gets resetted and overwritten on :hover. When we blur the <a> and release the :hover the old class reapplies and therefore again resets the animation attribute. There sadly is no way to save … Read more
Add animation-fill-mode: forwards; to your .go The animation’s final keyframe continues to apply after the final iteration of the animation completes. http://css-infos.net/property/-webkit-animation-fill-mode
Yes, there is. The callback is an event, so you must add an event listener to catch it. This is an example with jQuery: $(“#sun”).bind(‘oanimationend animationend webkitAnimationEnd’, function() { alert(“fin”) }); Or pure js: element.addEventListener(“webkitAnimationEnd”, callfunction,false); element.addEventListener(“animationend”, callfunction,false); element.addEventListener(“oanimationend”, callfunction,false); Live demo: http://jsfiddle.net/W3y7h/
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
I had a similar problem and used @-webkit-keyframes pan { 0%, 10% { -webkit-transform: translate3d( 0%, 0px, 0px); } 90%, 100% { -webkit-transform: translate3d(-50%, 0px, 0px); } } Bit irritating that you have to fake your duration to account for ‘delays’ at either end.
How about a slightly modified version of @xec’s answer: http://codepen.io/thetallweeks/pen/yybGra CSS Animation that uses steps. See MDN docs .loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; -webkit-animation: ellipsis steps(4, end) 900ms infinite; animation: ellipsis steps(4, end) 900ms infinite; content: “\2026”; /* ascii code for the ellipsis character */ width: 0px; } @keyframes ellipsis { to … Read more
If you use :active selector in combination with :hover you can achieve this according to w3schools as long as the :active selector is called after the :hover selector. .info-slide:hover, .info-slide:active{ height:300px; } You’d have to test the FIDDLE in a mobile environment. I can’t at the moment. correction – I just tested in a mobile, … Read more
I think you’re looking for animation-fill-mode CSS3 property https://developer.mozilla.org/en/CSS/animation-fill-mode The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing. for your purpose just try to set h2 { animation: fadeIn 1s ease-in-out 3s; animation-fill-mode: forwards; } Setting forwards value «the target will retain the … Read more
This is a bit lengthy but I’ve used all the native events and methods to achieve this animation. No ReactCSSTransitionGroup, ReactTransitionGroup and etc. Things I’ve used React lifecycle methods onTransitionEnd event How this works Mount the element based on the mount prop passed(mounted) and with default style(opacity: 0) After mount or update, use componentDidMount (componentWillReceiveProps … Read more
The original Netscape <blink> had an 80% duty cycle. This comes pretty close, although the real <blink> only affects text: .blink { animation: blink-animation 1s steps(5, start) infinite; -webkit-animation: blink-animation 1s steps(5, start) infinite; } @keyframes blink-animation { to { visibility: hidden; } } @-webkit-keyframes blink-animation { to { visibility: hidden; } } This is … Read more