css-transitions

I've got css to do a card flip on a element in 3d space. It works great except for when you scroll up and down the page you randomly get white elements displaying on the page at certain places in Chrome. I've attached an image as an example inside a facebook tab. In chrome windows, the white "boxes" cover up content on occasion. When I comment out the 3d transform css, this doesn't occur. Here is a fiddle ( http://jsfiddle.net/derekaug/QSEvs/ ) of the css that does the 3d stuff. Unfortunately, I can't link to the actual tab yet as it's not public. Fernando Diaz Garrido I have a problem like

I'm trying to replicate sucking effect in ios using css3 -webkit-transform:matrix3d() property. However, I can't manage the curved edges like in the picture. The closest solution by myself is the following: -webkit-transform: matrix3d(0.85, 0.0678, 0, 0, 2.37, 0.85, -1.36, -0.0019, 0, 0, -1.53, -3.73, 0, 0, 0.34, 1); Here is the jsfiddle result. How can I do the transformation like in the picture. Note that how right and left edges are curved. I've made some search about css3 transformations. If you're using matrix3d property, you can only make linear transformations which doesn't let you

I have this issue with a DIV being rotated with CSS3 transforms using a 1s transition: In Chrome 23 & Safari 6 on OSX 10.7.5 the font in the other containers gets slightly dimmed, during the .rotate-divs transition. Any ideas on what causes this and how to avoid it? http://jsfiddle.net/tTa5r/ .rotate{ background: green; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .rotate.flip{ -moz-transform: rotate(540deg); -webkit-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg); } the flip class is

I have img inside the div with exact width and height . I would like to place image there like background-size: cover to fill entire div so HTML is: <div class="cover"> <img class=active src="http://pixabay.com/static/uploads/photo/2015/02/26/17/56/clock-650753_640.jpg" alt="time"> </div> And CSS is: .cover { width: 400px; height: 180px; position: relative; } .cover img { visibility: hidden; opacity: 0; width: 100%; height: 100%; object-fit: cover; -webkit-transition:visibility 0s linear 4.0s,opacity 2.0s linear 2.0; transition:visibility 0s linear 4.0s,opacity 2.0s linear 2.0s; } .cover img

In this codepen example: http://codepen.io/DrYSG/pen/ovctn I created three flexboxes. The effect I want is that when one hovers over the middle box, it grows in size (color change in the demo is just to help me know about the hover). In FireFox v19 this almost works correctly. But it is strange what it picks of the start and end widths of the animation. In Chrome v25, I am getting rapid unstable oscillation of states (flashing). Really not correct. In IE10 I get the same transition as FireFox, but no smooth transition. I fixed it. Take a look at the http://codepen.io/DrYSG/pen/ovctn now. 来源：

I have been playing with animated CSS3 Media Queries, yes I know their practical use is questionable but it is fun. Anyways, I can get boxes/divs/selectors to transition/expand/contract etc on browser resize but I am having problems with transforms. What I am trying to do is make a div flip or rotate at certain resolutions. Think of it as an iPad changing from landscape to portrait and a div flipping when this happens. Is this actually possible and if so what am I missing/doing wrong? Ok, I have it working now. Based on post-erasmus' css I was able to tweak it and get it working 100%. Here's

I have noticed that with the update from android 4.0 to 4.1, there is a change as to css transition prefix in the stock browser & webView Basically, both "transition" and "webkitTrantion" are defiend. Modernizr.prefixed("transition") returns webkitTrantion on android 4.0 Modernizr.prefixed("transition") returns trantion on android 4.1 However, as to transition end event name, "transitionend" event is not defined / does not work. you still need to use the webkit specific "webkitTransitionEnd" event name QUESTION: I cannot find any documentation on this change, and thus are not certain how to

I have just styled one of my images with this CSS3 hover effect: http://tympanus.net/Tutorials/OriginalHoverEffects/index2.html The problem is that in Chrome some of the other elements on the page are affected by this hover effect it seems. For instance, when I hover the image my top menu item links are moved 5px to the right and back again when the hover effect ends. Also a couple of block quote elements are affected this way. It´s as if some of these other elements are given a "padding" value by the CSS3 transition effect in some strange way.. I see none of these problems in IE and Firefox,

I would like to increase the width of a bar with a CSS transition but don't like to trigger it with a hover event ( like http://jsfiddle.net/TFHn9/ ) I just would like to have an instant animation (when the page loads) - without Javascript of course. Any chance to achieve that? Css3 keyframes: http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/ 来源： https://stackoverflow.com/questions/10995039/trigger-transitions-without-javascript-in-css-on-page-load

I am trying to start using some CSS3 transitions on responsive site I'm making and everything is working perfectly on desktop Chrome, and Chrome on Android but it's not working properly on ios devices for both Chrome and Safari. The CSS snippet I'm using for my menu, for instance, is below: #menu { width: 180px; height: 100%; position: fixed; top: 0; left: -180px; z-index: 9; transition: left 1s; -webkit-transition: left 1s; } I have a menu button that, when clicked, calls a javascript function that changes the 'left' style to 0 which has it transition into position from outside of the left