css-transitions

问题 I have a CSS3 transition that resizes/positions an image inside a div on hover. FIDDLE This works as desired but my concern is about browsers that don't support CSS3 transitions like IE9-. Would it be possible to write this CSS code so that these browsers have a fallback ? Idealy, the fallback should display the image so it fits the div and isn't zommed (fiddle example) and with no animation on hover. I would prefer a CSS only solution and to not to alter the markup. Full code example : HTML

问题 I have a group of elements that when toggled with the .active class, extend their max-height and animate out. I'm hitting a problem though when removing the .active class, I'm not getting the animation back to the closed state. document.getElementById("show-all").addEventListener("click", function(e) { const elements = document.querySelectorAll('.horizontalBarGraphContainer'); elements.forEach((item) => { item.classList.toggle('active'); }); }); * { font-family: Helvetica, sans-serif; font

问题 I have a css slider (code attached). It's working fine when buttons are clicked, however, I would prefer to get each banner to slide when the buttons are hovered on. I tried to combine the :hover and :target events but didn't have any luck. If anyone knows of a way to get the sliding functionality on hover then that would be great. Thanks for any help. I would like to achieve this with CSS only, if possible. body { margin: 0; padding: 0; } .slider-holder { width: 600px; height: 280px;

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

问题 Question: Is it even possible to do two different transforms on an element and have them transition at different speeds? Example without transforms (Fiddle): div { width: 100px; height: 100px; background: red; transition: width 1s linear, height 2s linear; } div:hover { width: 200px; height: 400px; } Notice how it takes 1 second for the width to expand to 200px, and 2 seconds for the height to expand to 400px. Example with transforms (Fiddle): div { width: 100px; height: 100px; background:

问题 I have a hidden div #about. By clicking the link #clickme the div gets unhidden by a function. Unfortunately the CSS transition (opacity) is not working though it should keep both classes .hide and .unhide including the transitions. Any ideas? HTML <li><a id="clickme" href="javascript:unhide('about');">click me</a></li> <div id="about" class="hide"> <p>lorem ipsum …</p> </div> CSS .hide { display: none; -webkit-transition: opacity 3s; -moz-transition: opacity 3s; -o-transition: opacity 3s;

问题 I want to set several transform options for my html object but with different duration and delay. If i try to use something like that: -webkit-transition: -webkit-transform, opacity; -webkit-transform: rotate(180deg) scale(2); -webkit-transition-duration: 2000ms, 6000ms; -webkit-transition-delay: 0ms, 6000ms; Then i will have different time function for transform and opacity but can i set different options for rotate and scale, e.g. rotate for 10s and scale 20s? 回答1: Probably not directly,

问题 I was goofing around with the ::placeholder pseudoelement on Codepen (Chrome 59.0.3071) when I noticed something odd. (please see my JSFiddle) In brief, this CSS should not enable a transition of the ::placeholder color over 2s: input::placeholder {color:red;transition:2s;} input:hover::placeholder {color:green} Using Firefox, there is no color transition over a 2 second interval on hover (this appears to be correct according to this section of a W3C spec and this section of a different one -

问题 i came across an issue today and it took me so long to debug, I couldn't find a solution anywhere online so I thought it would be useful to document It seems that transitions do not work on Firefox if the parent's "overflow" property is changed together with the transition - ie: .parent { overflow: hidden; } .parent:hover { overflow: visible; } .child { opacity: 1; transition: opacity 1s linear; } .parent:hover .child { opacity: 0; } The transitions will not work on the child. Remove the

问题 Using CSS3, I have set a background image as a cover. Upon first loading the page in Chrome and hovering over a link, the background around the text shifts slightly (but quite noticeably). I am using a transition for the hover, but the background shift also happens with the transition removed. My guess is that the background is resizing during hover, but I'm not sure how to keep this from happening. Once it has shifted, you can rollover other links without any problem. After refreshing the