css-transitions

问题 I've got a strange behavior when adding a CSS animation on top of the transition for a progress bar element: the transition just stops executing. Not sure why I cannot have both, an initial animation and the transition when changing the element's width. The whole thing looks like this: HTML: <div class="container"> <div class="bar"></div> <div class="actions"> <button id="btnResize">Resize bar</button> </div> </div> CSS: .bar { height: 3px; width: 300px; background-color: blue; position:

问题 When I click on the scene, then box falls down. When I click again, box stands up. Animation is smooth, but when I click many times in different positions, then sometimes animation skips frames. I have this bug on OS X in Google Chrome. Tested in Opera — everything is ok, there is no bug. http://jsfiddle.net/nw78myhn/1/ Does anybody know how to fix the problem? <div class="scene"> <div class="box"></div> </div> .scene { width: 500px; height: 500px; position: absolute; background: #efefef; }

问题 I've a big problem with a jQuery Mobile Application: I'm using custom functions (they are triggered by onClick) to switch the page with currentPage. It only happens on Android-Devices on sites in which has changed (due to ajax requests) with the integrated browser. iOS and Chrome works nice. After clicking on an element, the animation started but just before it ends, it switches back to the old page. After a half second, it switches back to the new. I made a movie of the bug here: http://www

问题 The links in the left menu in this website have a CSS3 transition property of the color , which changes on mouse hover. It's not working in Chrome 16 or 17 (the color change is sudden), whereas other transitions in the website do. It works in Firefox, Opera, and even Safari, which uses webkit like Chrome, so I don't think it might be a problem with my CSS. What then? Here's my CSS of this part (the full CSS is here): #menu a { color: gray; transition: color 0.5s; -moz-transition:color 0.5s; /

问题 The links in the left menu in this website have a CSS3 transition property of the color , which changes on mouse hover. It's not working in Chrome 16 or 17 (the color change is sudden), whereas other transitions in the website do. It works in Firefox, Opera, and even Safari, which uses webkit like Chrome, so I don't think it might be a problem with my CSS. What then? Here's my CSS of this part (the full CSS is here): #menu a { color: gray; transition: color 0.5s; -moz-transition:color 0.5s; /

问题 I am using CSS3 transform on a background image to enlarge on hover. I have tested in the latest browsers of Opera, Safari and Firefox and work nice and smooth, however in Chrome the transition is very jerky. Heres is the link, hover over the social icons to see what I mean.. http://www.media-flare.com/pins/ - I have noticed as you resize the browser down to mobile view, it gets worse. I have done a jsfiddle version here and slowed down the transition as it is harder to see. http://jsfiddle

问题 I want to create an expand/collapse animation that's powered only by classnames (javascript is used to toggle the classnames). I'm giving one class max-height: 4em; overflow: hidden; and the other max-height: 255em; (I also tried the value none , which didn't animate at all) this to animate: transition: max-height 0.50s ease-in-out; I used CSS transitions to switch between them, but the browser seems to be animating all those extra em 's, so it creates a delay in the collapse effect. Is there

问题 In my CSS I defined a transition for a class. For some reason, when I hover over the class with the transition, the transition-duration for some reason alters the font color elsewhere (form placeholders and certain links). (This happens only in Safari as far as I can tell.) Here's a jsFiddle that shows what I'm talking about: http://jsfiddle.net/EJUhd/ Does anyone know why this occurs and how I can prevent it? 回答1: I was struggling with a similar issue. For me, random links throughout the

问题 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

问题 I'm trying to create a mouse-over effect that slides the top layer to the left and reveal the bottom layer using CSS3. The code works in Chrome but not in Firefox...did I do something stupid again? Thanks for your help! Edit: I must have done something wrong, because even if I leave out the transition code, nothing happens when I hover over "layers" in Firefox...:( The code: <html> <div class="layers"> <div class="over">content</div> <div class="under">content</div> </div> </html> The style: