css-animations

Is there a callback on completion of a CSS3 animation?

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/

Imitating a blink tag with CSS3 animations

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

CSS3 animation not working in safari

Found the solution. In Safari when you use Keyframes you need to use the whole percentage: this won’t work: @-webkit-keyframes keyarm { 0% { -webkit-transform: rotate(0deg); } 5% { -webkit-transform: rotate(-14deg); } 10% { -webkit-transform: rotate(0deg); } } this will: @-webkit-keyframes keyarm { 0% { -webkit-transform: rotate(0deg); } 5% { -webkit-transform: rotate(-14deg); } 10% { … Read more

Rotate objects around circle using CSS?

Jquery solution which works for any number of outer items. Jquery shamelessly stolen from ThiefMaster♦ and their answer at this Q & A var radius = 100; // adjust to move out items in and out var fields = $(‘.item’), container = $(‘#container’), width = container.width(), height = container.height(); var angle = 0, step = … Read more

How can I create a marquee effect?

With a small change of the markup, here’s my approach (I’ve just inserted a span inside the paragraph): .marquee { width: 450px; margin: 0 auto; overflow: hidden; box-sizing: border-box; } .marquee span { display: inline-block; width: max-content; padding-left: 100%; /* show the marquee just outside the paragraph */ will-change: transform; animation: marquee 15s linear infinite; … Read more

Changing Background Image with CSS3 Animations

Updated for 2020: Yes, it can be done! Here’s how. Snippet demo: #mydiv{ animation: changeBg 1s infinite; width:143px; height:100px; } @keyframes changeBg{ 0%,100% {background-image: url(“https://i.stack.imgur.com/YdrqG.png”);} 25% {background-image: url(“https://i.stack.imgur.com/2wKWi.png”);} 50% {background-image: url(“https://i.stack.imgur.com/HobHO.png”);} 75% {background-image: url(“https://i.stack.imgur.com/3hiHO.png”);} } <div id=’mydiv’></div> Background image [isn’t a property that can be animated][1] – you can’t tween the property. Original Answer: (still … Read more