css-transitions

Subject I have a text-box that hides overflowing text with ellipsis. Only one line is visible. I accomplished this using text-overflow and white-space: nowrap . The element has a fixed height value. When tapped/clicked the box should smoothly expand (it's height) to show the rest of the text. I accomplished this using CSS transitions and Javascript. A hidden "shadow" description container contains the same text without white-space and overflow handling. It has the full height. When toggeling the actual box I set the height value read from the "shadow" element and add a class that will remove

I'm trying to animate a CSS gradient as described here but I can't get it to work. As an example I've put together this jsfiddle. As a overview, it seems that CSS transitions on gradients doesn't seem to work. div#Machine { -webkit-transition: background 5s; -moz-transition: background 5s; -ms-transition: background 5s; -o-transition: background 5s; transition: background 5s; background: rgb(71, 234, 46); background: -moz-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(71, 234, 46, 1)),

I'm looking for the webkitTransition object reference here function spawnAnimation(what){ //sets the moving element var moveingEl = document.getElementById(what); //gives temp transition property moveingEl.style.WebkitTransition = "left 2s"; // moveingEl.style.webkitTransition = "top 500ms"; var cLeft = moveingEl.style.left var cleft = Number(cLeft.slice(0, -2)); var cTop = moveingEl.style.top var cTop = Number(cTop.slice(0, -2)); moveingEl.style.left = cLeft+200 + "px"; } This does not work.I would like to give the element a transition property, then make it move to the right. When this code

Check out this fiddle: http://jsfiddle.net/sajYc/ The transition for the :after pseudo element works in firefox, but fails in webkit based browsers. Any idea if this is coming up in a future release? Any non-jquery overkill workarounds for it? Basically, I'm using it on a page to fade between two states of a background image sprite(instead of two colors like in the fiddle). A smooth transition between an icon's normal and hover state. So I don't want to add a bunch of actual elements to it just to make this animation work. Unfortunately, this is a known issue in Webkit browsers and IE: http:/

When an element contains another element that is being animated via a CSS transition , click events are occasionally not fired. Test case: http://codepen.io/anon/pen/gbosy I have a layout where a series of images have captions which are revealed on hover. On click they fire off a .slideDown of an adjacent element. They themselves are likely to be quickly clicked through by a user. The problem is even more noticeable on a live site than in the codepen. In the codepen, approximately 90% of my clicks are being obeyed, whereas when CSS transitions are disabled, 100% are obeyed. Any suggestions are

I have an tag which is displayed as a block. On page load, its width is increased by a css animation from zero to some percentage of the containing div (the fiddle contains a MWE, but there is more than one link in this div, each with a different width). On hover, I want it to change colour, change background colour, and also expand to 100% of the div, using a CSS transition . The colour and background colour bit is working, but it seems to ignore the width transition. Snippet: .home-bar { text-decoration: none; background-color: white; color: #5e0734; display: block; -webkit-animation

I want to use multiple classes to optionally add transitions. Instead of stacking, the previous is getting overridden. .container { transition: margin .2s; } .container.t-padding { transition: padding .2s; } The problem: Property is overridden rather than stacking http://jsfiddle.net/yz2J8/2/ (The problem) My temporary solution: Add the previous transition to the rule .container { transition: margin .2s; } .container.t-padding { transition: padding .2s, margin .2s; } http://jsfiddle.net/ZfQcp/6/ (My temporary solution) What's a better solution?? How can I avoid having to create tons of rules