css-transitions

In my app I'm animating the opacity of elements on the page with something like: .s { transition-property: opacity; transition-duration: 250ms; } (with vendor-specific versions, of course). And then .s.hidden { opacity: 0; } So the animation starts when the hidden class is assigned. Problem is, mouse events are still detected on elements with opacity zero, which I don't want, so I need to either set visibility to hidden or display to none after the transition is finished. I would hope to be able to do something like: .s { transition-property: opacity, visibility; transition-duration: 250ms;

Looking to optimize this infinite scrolling effect, however I'm not entirely sure how to create a smooth transition when looping back to the original image. At 10s it's hardly noticeable, however at 30s it's more evident. I'm assuming it has something to do with the ending position margin, but can't quite pinpoint it. What should the value of the last frame be? JSFiddle HTML: <div class="container"> <div class="photobanner"> <img class="first" src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150

I'd like to delete an object after it's done animating with a CSS transition, but I'm not able to use a JavaScript library. How do I detect when the animation is done? Do I use a callback or custom event somehow? element.addEventListener('transitionend', function(event) { alert("CSS Property completed: " + event.propertyName); }, false ); For now, the exact event name has not been standardized. Here's a quote from MDN : There is a single event that is fired when transitions complete. In all standard-compliant browser, the event is transitionend , in WebKit it is webkitTransitionEnd . Here's

I have a list with one item on the list transitioning to the northeast when I hover over it. Using margin-top and margin-left property transitions worked but the item being hovered over kept pushing other elements so I added position:relative and tried using top and left transition properties but it didn't seem to be working. Here is the jsfiddle: list hover Have you tried setting the parent of your list. I know sometimes relative has issue unless the underlying item is also relative or absolute. Just a thought. Add left, top default link demo left: 0px Use position:absolute and it will take

This is what I have: .box{ background:#FFF; -webkit-transition: background 0.5s; } .box:hover{ background:#000; } But this appends to both onmouseover and onmouseout actions, but isn't there a way to control them? Something like: -wekbkit-transition-IN: background 1s; -webkit-transition-OUT: background 10s; Just redifine your transition in the over pseudo element. .box{ background: white; -webkit-transition: background 5s; } .box:hover{ background: olive; -webkit-transition: background 1s; } Look my http://jsfiddle.net/DoubleYo/nY8U8/ Either use an animation (only in webkit currently), or use