css-animations

I have a simple "pulsating" effect on the play-button (which is an anchor tag), using CSS3 and keyframes. While it works flawlessly in Chrome and Safari, it doesn't seem to be working in Firefox. Does anyone have an idea on why? li > a { -webkit-animation: pulsate 3s ease-in-out; -moz-animation: pulsate 3s ease-in-out; -o-animation: pulsate 3s ease-in-out; animation: pulsate 3s ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes pulsate { 0% {

Trying to fade in one div....and 7 seconds later, fade another div in. I cannot, for the life of me, figure out why it's not working. The animations themselves work (the fadein/fadeout animations) but I need the "going" div to fade in after a set amount of seconds. Anyone know how to do this correctly? .coming{ width:320px; height:auto; position:absolute; top:0px; left:0px; margin-left:10px; background:#FFF; color:#000; font-family: Sans-Serif; font-size:24px; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 0px #000; -webkit-box-shadow: 0px 0px 0px #000; box-shadow: 1px 1px 5px

when it comes to wrap point how can we add animation? maybe this can help: we have a header and inside of that header we have container with flex attr and the direction is column when we resize our browser from bottom to top or when we changing height of browser those items suddenly reshape , I just want to add animation to this event.thx <header> <div class="container"> <div class="item1 item"></div> <div class="item2 item"></div> <div class="item3 item"></div></div></header> header { width: 200vw; max-height: 100vh ; } .container{ display: flex; max-height:100vh; flex-direction: column; flex

I have a very strange issue. I'm loading articles from JSON in jQuery and as they load, I'd like to add a class of 'animate' to each dynamic element. $.each(jsonArticles, function (i, article) { var $articleHTML = $( '<article class="article">' + '<a href="' + jsonObject.filmLink + article.reviewLink + '"><img src="' + jsonObject.imagePath + article.reviewImage + '" alt=""></a>' + '<h1><a href="' + jsonObject.filmLink + article.reviewLink + '">' + article.reviewTitle + '</a></h1>' + '<p><a href="' + jsonObject.filmLink + article.reviewLink + '">' + article.reviewSummary + '</a></p>' + '<

I would like to use inherit with calc() like this: #foo { animation-duration: 10s; } #foo > .bar { animation-duration: calc(inherit + 2s); /* =12s */ } But it don't seem to works. Is it browsers bug or specs? The inherit keyword can only exist alone as a value in a property declaration. It cannot be used with anything else as a value, because it's a value in and of itself. This means it cannot be used with functions like calc() either. See CSS2.1 and css3-cascade . Furthermore, the calc() function itself only takes literal numeric values such as numbers, dimensions and percentages . So to put

I'm trying to animate in CSS3 margins, which this site seems to say you can, but I can't get working. I actually have 3 animations. 1 for a simple initial fadeIn on initial load, then the 2 others for the margin animation on click. I've also just tried margin instead of the top and bottom but still no sign of it working. Click on a section to see animation toggle. $(".section").click(function() { $(this).toggleClass("open"); }); body{ background: #f1f1f1; } .section{ display: block; background: #fff; border-bottom: 1px solid #f1f1f1; animation: fadeIn .5s ease, margin-top .5s ease, margin

This works in all browsers except IE 11. My code is pretty basic. Click on the text to toggle the class "infinite" which (should) loop the bounce effect forever. IE11 applies the class to the H1 tag but it doesn't animate infinitely like it does in all other browsers. The intended behavior is for it to bounce once at load (this works) and clicking the text applies the class "infinite" which (should) makes it bounce forever (this doesn't work in IE 11). $(window).ready(function(){ $('h1').on('click',function(){ $('h1').toggleClass('infinite'); }); }); <link href="//cdnjs.cloudflare.com/ajax

I'm facing a problem, I have a div with an absolute position, and I'm trying to rotate it 360 degrees with an endless looping. But if I use the transform: translate (-50%,-50%) to fully center this div, it won't work properly. HTML <div class="randomName"></div> CSS .randomName { background-color: orange; width: 1500px; height: 1500px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); animation: orbita 2s linear infinite; -webkit-animation: orbita 2s linear infinite; -moz-animation: orbita 2s linear infinite; -o-animation: orbita 2s linear infinite; } @keyframes orbita