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
The solution is to set the default value in your .elem. But this annimation work fine with -moz but not yet implement in -webkit Look at the fiddle I updated from yours : http://jsfiddle.net/DoubleYo/4Vz63/1648/ It works fine with Firefox but not with Chrome .elem{ position: absolute; top: 40px; left: 40px; width: 0; height: 0; border-style: … Read more
Create another CSS animation called fadeOut, say. Then when you want to remove the element, change the animation property on the element to that new animation, and use the animationend event to trigger the actual removal of the element once the animation is done: $(‘.hide’).click(function() { if (!$(this).hasClass(‘disabled’)) { $(‘#fill’).css(‘-webkit-animation’, ‘fadeOut 500ms’); $(‘#fill’).bind(‘webkitAnimationEnd’,function(){ $(‘#fill’).remove(); $(‘.show, … Read more
Fix delay solution: Put cubic-bezier(0, 1, 0, 1) transition function for element. scss .text { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); &.full { max-height: 1000px; transition: max-height 1s ease-in-out; } } css .text { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); } .text.full { max-height: 1000px; … 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
I’ve fixed up @skyline3000’s demo based on this example from Treehouse. Not sure if this will break again if browsers change but this seems to be the intended way to animate flex size changes: http://jsfiddle.net/2gbPg/2/ Also I used jQuery but it technically isn’t required. .flexed { background: grey; /* The border seems to cause drawing … Read more
You can use -webkit-animation-fill-mode to persist the end state (or even extend the start state backwards). It was added to WebKit a while ago, and shipped in iOS 4 and Safari 5. -webkit-animation-fill-mode: forwards;
Strictly speaking, any “3D” shape on a flat screen is more an illusion of a 3D object. All we see is a 2D projection of that shape on the screen plane, and our brain does its best to guess which shape could give the projection we see. If the projection changes, our brain interprets it … Read more
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
In background-position: 500px 0px; replace 500px with 610px, which is the background-size body { background-color: #111; } #earth { width: 300px; height: 300px; background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg); border-radius: 50%; background-size: 610px; box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3); animation-name: rotate; animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear; … Read more