animation
Animate CSS background-position with smooth results (sub-pixel animation)
Checkout this example: #content { height: 300px; text-align: center; font-size: 26px; color: #000; position:relative; } .bg{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat; animation-name: MOVE-BG; animation-duration: 100s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes MOVE-BG { from { transform: translateX(0); } to { transform: translateX(-187%); } … Read more
Use nth-child as CSS variable
Please remember that you can assign variables in CSS too. :nth-child(1) { –nth-child: 1 } :nth-child(2) { –nth-child: 2 } :nth-child(3) { –nth-child: 3 } Then you can apply it like this: animation: fade-in calc(var(–nth-child) * 1s) 1s forwards; And here come some demo.
Animate opacity doesn’t work properly on IE
I was under the impression that jQuery did the whole opacity support thing for you. Does this work for all browsers? $(‘#list_box’).animate({opacity: ‘1’,height: ‘300px’,top: newTop},{duration: 300});
wpf rotate image around center
Just set RenderTransformOrigin to (0.5, 0.5) on the image <Image Source=”Images/refresh.jpg” RenderTransformOrigin=”.5,.5″ Height=”15″> …
Bounce a pin in google maps once
Bit of a simple approach: Google’s bounce animation appears to take exactly 750 ms for one cycle. Thus, simply set the timeout to 750 ms and the animation will stop exactly at the end of the first bounce. Works for me on FF 7, Chrome 14 and IE 8: marker.setAnimation(google.maps.Animation.BOUNCE); setTimeout(function(){ marker.setAnimation(null); }, 750);
How to draw a vector path progressively? (Raphael.js)
Maybe someone is searching for an answer, like me for two days now: // Draw a path and hide it: var root = paper.path(‘M0 50L30 50Q100 100 50 50’).hide(); var length = root.getTotalLength(); // Setup your animation (in my case jQuery): element.animate({ ‘to’: 1 }, { duration: 500, step: function(pos, fx) { var offset = … Read more