css-transitions

I have been trying to put some basic CSS3 animation. The objective is to toggle a class on the click event of a button and animate a div based on the added class. The code works perfectly for the first iteration of toggle in Firefox but for other browsers like Chrome and for the next iteration in Firefox the transformation is toggled in a blink of an eye. Please help me to figure out what's going wrong. Snippet: $('button').click(function() { $('div').toggleClass('clicked'); }); div { background-color: #ccc; height: 100px; width: 100px; transition-property: top, left; transition-duration: 1s;

Im wondering if anyone know when will webkit support transitions of gradients? for example, the following code doesnt work in Chrome 6 (assuming grad-transition is a link): .grad-transition { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(black)); -webkit-transition: background-image .5s; } .grad-transition:hover { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white)); } Trying to do the same thing. As of right now I do not think it is possible to animate a gradient. I'm using a workaround. Instead of animating the gradient, I'm using a semi

I have an element whose width I'd like to animate when its contents change. It has width: auto , and this never changes. I've seen this trick , but that's for transitioning between two values and one is set. I'm not manipulating the values at all, only the content, and I'd like my element's size to change with animation. Is this at all possible in CSS? Here's a simplified version of my code: .myspan { background-color: #ddd; } .myspan:hover::after { content: "\00a0\f12a"; font-family: Ionicons; font-size: 80%; } <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"

LESS allows parametric mixins, such as: .transition(@property, @duration){ transition: @property @duration; -moz-transition: @property @duration; /* Firefox 4 */ -webkit-transition: @property @duration; /* Safari and Chrome */ -o-transition: @property @duration; /* Opera */ } However, this doesn't always work with properties such as transitions. If you are trying to have multiple transitions and attempt to call the mixin multiple times, the last mixin overrides all previously defined transitions. That's because the proper CSS3 syntax for defining multiple transitions is: ... { transition:

I am animating a container on mouseover from right to the left with CSS transitions. This works fine in all browsers except Internet Explorer. The reason is that I am using (and need to use) calc() in my CSS left property. I created a live demo here: Live Demo The CSS looks like this: div { background: red; width: 100px; height: 100px; position: absolute; top: 100px; left: 90%; -webkit-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); transition: left 0.7s cubic-bezier(0