css-transitions

问题 If you go to my site: http://warringah-plastics.com.au/wplastics you can see as you hover over a menu item in the main navigation an indicator arrows shows up on top of it. Then when you move your mouse across the menu left to right the CSS transition is pretty smooth. But when you move from right to left the transition kind of snaps past the menu item and doesn't look nice. Currently I am applying this CSS to the nav li element: transition: all 0.5s ease-in-out 0s !important; I have tried

问题 CSS3 transition not working for the SVG path when using linearGradient animate . #loading-frame { transition: all 1s; /* fill: transparent; */ /* fill: blue; */ } #loading-frame:hover { fill: tomato; } <svg id="battery" width="110px" height="88px" viewBox="0 0 110 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

问题 I have a scenario where I need to click on a div which will give me another div with some transition, but the problem is the clicked div is getting hidden upon the transition div . I need the clicked div to slide with the transition div with the same transition effect. Below is what I have tried: HTML: <div id='outerdiv' ng-controller="MyCtrl" > <div ng-click="myValue=!myValue">RIGHT</div> <div id="one" class='animate-hide' ng-hide="myValue"> this is just a sample div </div> {{myValue}} </div

问题 I'm trying out some webkit transitions on a site and have come across a problem on iOS devices. I have six images being given a random rotation every second. The transition works fine for five out of the six images but for some reason when using the iPad or the iPhone the sixth image disappears during the transition. You can view the example HERE. CSS: .b1_needle { width: 100%; height: 100%; z-index: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit

问题 I am experiencing elements transition misbehaviour into my page, IE(11) only; The fullscreen revolution slider, remain in place doesn't move with the wrapper when the left slider is opening (clicking on info+ button like we have in Chrome/Firefox). Thanks to @afelixj, I've tried to use this css hack for IE in order to apply the tansition effect to the fullscreen slider too, adding .fullscreen-container but without result. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none

问题 I want the menu to close in the same duration it takes for it to open. For some reason, there is a delay before closing, along with showing some extra space I have no idea where it comes from. Here is the jsfiddle: https://jsfiddle.net/m9pd8bjh/7/ Here's the CSS code in case you see something wrong immediately: .hide { visibility: hidden; overflow: hidden; max-height: 0; } input[type=checkbox]:checked~.toggleable { visibility: visible; overflow: visible; max-height: 1000px; } .toggleable {

问题 The related question has been asked here: CSS3 or jQuery animation with given step Now I'd like to ask, is there a transition (CSS3 or jQuery) that works on iPhone 4 / iPad / iPad 2, lets to change full-screen slides (images or even frames, full of controls) gradually and is fast enough to be smooth? Regards, 回答1: For maximum performance on iOS devices, use translateZ(0) or translate3d(0,0,0) in your transition/animation to enable hardware acceleration via the GPU. more info here: http://www

问题 I'd like to make black error message text "glow" with a red outline that fades away after a second, but, if updated, return to "full glow" and start fading away again, even if it hadn't faded away completely in the first place. Is there a fairly easy jQuery/ CSS way to do this? I think two simultaneous fading techniques would compete with each other, being asynchronous and all, and I don't quite know how to generate the glowing effect, or if it's even possible using standard styling. 回答1: You

问题 I know how to get CSS transitions to work, but in this case I want to know why getComputedStyle() won't update the right class. Here's a reference to use the getComputedStyle() method to force style recalculation: jQuery addClass method chaining to perform CSS transitions An example of it working: http://jsfiddle.net/j8x0dzbz/8/ Now here's my fiddle of it not working: http://jsfiddle.net/me8ukkLe/12/ And here's my code: $('button').click(function() { $('div div').eq(0).addClass('right');

问题 I've got a div with an animation on working perfectly in Chrome. Here is the code... @-webkit-keyframes adjustHue { 0% { -webkit-filter: hue-rotate(0deg); } 25% { -webkit-filter: hue-rotate(45deg); } 50% { -webkit-filter: hue-rotate(90deg); } 75% { -webkit-filter: hue-rotate(135deg); } 100% { -webkit-filter: hue-rotate(180deg); } } .blocky { width: 100%; height: 100%; position: relative; overflow: hidden; text-align: center; -webkit-background-size: cover; -moz-background-size: cover; -o