css-transitions

When I hover unto my button, it gives a white flash first when starting the transition. Why does it sort of flickers when I apply a css3 transition to my button? My browser is Google Chrome See here <button>Log In</button>​ CSS: button { background: #ff3019; background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: -ms-linear-gradient(top,

I can make an element with an opacity of zero fade in by changing its class to .elementToFadeInAndOut with the following css: .elementToFadeInAndOut { opacity: 1; transition: opacity 2s linear; } Is there a way I can make the element fade out after it fades in by editing css for this same class? Thank you very much for your time. Gildas.Tambo Use css @keyframes .elementToFadeInAndOut { opacity: 1; animation: fade 2s linear; } @keyframes fade { 0%,100% { opacity: 0 } 50% { opacity: 1 } } here is a DEMO .elementToFadeInAndOut { width:200px; height: 200px; background: red; -webkit-animation:

I'd like a method that uses only CSS transitions, to effectively (and attractively) hide/show content on hover. The caveat being that I wish to keep dynamic (auto) height. It seems that the optimal route would be to transition between a fixed height:0 , to a height:auto , but alas this is not yet supported by transitions in browsers. A clarification in response to the comments :: This isn't so much a question of waiting until all living browsers are CSS3 compatible, but rather addressing a perceived shortcoming of CSS3 itself (eg. the lack of height:0 > height:auto ) I've explored a few other

I have animation follows this timing function: cubic-bezier(0.25, 0.1, 0.25, 1.0) I want to mod this function so i just get the ending 40% of it. To make things easy lets just say I want the end 50% of the function. How can I do this. So graphically this is what it is: https://developer.mozilla.org/files/3429/cubic-bezier,ease.png and I want to to make a cubic-bezier with parameters such that graphically we only see the top portion, so what we see from 0.5 to 1 (on the yaxist) porition of this graph, i want to make that same line but from 0 to 1. Please help me how to make this function. If

Background-size transitions are no longer working in Chrome 51 . I know that it was never supposed to work (see this ), but it did and still many people used it. I'm talking about percentage transitions on hover. I'm wondering if this is a bug in the new Chrome (which is possible, since this version brings a lot of new stuff), or they've decided to remove that transition for good? No issues in other browsers. div { background: url(http://cdn2.business2community.com/wp-content/uploads/2014/12/Super-Mario-no-longer-the-007.jpg) no-repeat center center; background-size: 50%; display: inline-block

I am surprised by the fact that a CSS3 transition rule applied via jQuery after a jQuery-based CSS property change actually animates this property change. Please have a look at http://jsfiddle.net/zwatf/3/ : Initially, a div is styled by two classes and has a certain height (200px) due to the default CSS properties of these two classes. The height is then modified with jQuery via removal of one class: $('.container').removeClass('active'); This reduces the height from 200px to 15px. After that, a transition rule is applied to the container via addition of a class: $('.container').addClass('all

I know this question has probably been asked million times here in SO, but Ive tried most of the solution, I just dont know why it dont work for me. So I have a dropdown with display initially targeted to none . When I click on it, it shows nice transition. (So far so good). But when I click on it again to go hide the dropdown, it hides immediately, but I dont want that. I want to hide with similar transition that was assigned to show. Here is my code for CSS: .dropdown-menu { padding: 0 0; display: none; -webkit-animation: slide-down .3s ease-out; -moz-animation: slide-down .3s ease-out; }