css-transitions

问题 I'm trying to build a dropdown menu where first the dropdown slides down, then one-by-one menu items appear from the bottom. On hover, it looks good but I don't know how to play it smoothly on hover off. What I'm trying to do is hide the second sub-menu item first, then the first submenu item, then the dropdown slides up. What I tried is to add the hide animation keyframes with a delay by default to the dropdown, and add the show animation on hover with 0 delay. But its not working properly

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

问题 I wonder If anybody knows a clever and new way how to make a transition between two background images? I know there are multiple tutorials out there just most of them are outdated and old. I wonder if there is a clever and modern CSS3 way of doing something like this. I have a simple logo.png set as background to a div.logo (I want it to be set as a background image not via img src ). And when I hover over it I want a smooth transition to "logo-hover.png" which is the same file just in a

问题 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. 回答1: I've made some search about css3

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

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

问题 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? 回答1: 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

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

问题 I'm working with something like this: http://jsfiddle.net/Hh2Ht/ As you can see, I have a group of float divs with the same width but with different heights. However, the container have a percentual width and as a consecuence, when changes its size the floating divs changes its position. I would like that this change of position was animated, using css transitions. I could do that with absolute positioning, a little bit of javascript to calc the positioning and binding the transition effect

问题 Is it possible to animate elements move with css3 transitions after hiding some element using jQuery's .fadeOut() ? I found some kind of solution here (see "It works for grids, too" section): However my case is more like this: http://jsfiddle.net/CUzNx/5/ <div class="container"> <div id="item1" class="item">Test1</div> <div id="item2" class="item">Test2</div> <div id="item3" class="item">Test3</div> <div id="item4" class="item">Test4</div> <div id="item5" class="item">Test5</div> <div id=