css-transitions

问题 I'm trying to get a smooth transition on an element with transform: translate() and some other properties. (Yes, I've read about matching vendor prefixes.) It works fine in Chrome and FF, but in Safari it doesn't animate the transform smoothly (jumps at the end). It seems to animate the width and padding fully before applying the translation. Note: I do not want to use transform: scale() . (Same as this question, which hasn't been answered in over a year.) See this stripped-down fiddle: https

问题 I realize that css animations are a well covered topic, but I'm just wondering about the best way to create simple slide like transitions? Mostly, when you read about slide transitions like that, some kind of position:absolute is assumed. That is not the way content is usually organized in HTML and it shouldn't be. So, if I want to create a transition of one div sliding to the left and one div sliding from the right, what would be a good strategy without assuming that any of those divs has

问题 I realize that css animations are a well covered topic, but I'm just wondering about the best way to create simple slide like transitions? Mostly, when you read about slide transitions like that, some kind of position:absolute is assumed. That is not the way content is usually organized in HTML and it shouldn't be. So, if I want to create a transition of one div sliding to the left and one div sliding from the right, what would be a good strategy without assuming that any of those divs has

问题 I'm facing this popular issue with Chrome, where I apply a filter:blur(8px) to an image hover and it flickers when the hover effect is on/off, the image flickers. Before posting I did search and try options like adding: -webkit-backface-visibility: hidden; or: -webkit-transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(0); -webkit-perspective: 1000; But none of those worked for me. It's important to notice that it happens on first load, or when

问题 I'm facing this popular issue with Chrome, where I apply a filter:blur(8px) to an image hover and it flickers when the hover effect is on/off, the image flickers. Before posting I did search and try options like adding: -webkit-backface-visibility: hidden; or: -webkit-transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(0); -webkit-perspective: 1000; But none of those worked for me. It's important to notice that it happens on first load, or when

问题 This might be a common issue, but I couldn't find the answer. Best way to understand the problem is to look at this fiddle: http://jsfiddle.net/sxvjejvk/ Basically I have a div with a border-radius and overflow:hidden . Inside the div is an image. When I hover over the div, I want the image to scale, using a transition. However, the border-radius of the div breaks (it doesn't have rounded corners anymore) for the duration of the animation. Adding -webkit-transform:translateZ(0) to the div

问题 This might be a common issue, but I couldn't find the answer. Best way to understand the problem is to look at this fiddle: http://jsfiddle.net/sxvjejvk/ Basically I have a div with a border-radius and overflow:hidden . Inside the div is an image. When I hover over the div, I want the image to scale, using a transition. However, the border-radius of the div breaks (it doesn't have rounded corners anymore) for the duration of the animation. Adding -webkit-transform:translateZ(0) to the div

问题 I'm creating a link list where one link container expands when hovering it ( with details, image and description). I have no problems to animate it with css transitions or animations. The problem is that I would like it to stay expanded even after the mouse moves away. And I would like to do it without javascript. Is that possible? Thanks! 回答1: No it's not possible because every css that will be applied on mouseover ( :hover ) will be removed on mouseout and there is no other way to capture

问题 I am new to CSS3 and working on a CSS3 code for blinking images. I just need to show an image with it blinking continually. I can't use a GIF image since the images come dynamically. 回答1: it's very simple... just use a CSS3 animation on opacity of the image I hope this helps.. here is a working fiddle http://jsfiddle.net/rameezrami/27754r4f/1/ or use following html <html> <head> <style> /* Firefox old*/ @-moz-keyframes blink { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @

问题 Im trying to figure out how to make shopping cart tab that would be positioned on the right corner and also rotated 90 degrees. The rotation naturally mixes the position but maybe there's a workaround of wrapping to different wrappers etc.... Extra points if there wouldn't need to define width. I don't care about older browsers 回答1: How about using transform-origin? See DEMO. Relevant CSS: #box { position: relative; } .bg { right: 40px; /* same as height */ height: 40px; transform: rotate(