css-transitions

问题 I'm trying to animate CSS filters but can't find any information on the correct transition properties. What are they? Here's an example: http://jsbin.com/onijim/3/ 回答1: -webkit-transition : -webkit-filter 500ms linear works in webkit. I don't know about filter support in FF or Opera. I'm not sure I wholly understand your question. 回答2: That's what I'm using. For Mozilla the 2nd is working for me, but in my sources I found it with the -moz- prefix, so it doesn't hurt to keep both. -webkit

问题 I'm trying to animate CSS filters but can't find any information on the correct transition properties. What are they? Here's an example: http://jsbin.com/onijim/3/ 回答1: -webkit-transition : -webkit-filter 500ms linear works in webkit. I don't know about filter support in FF or Opera. I'm not sure I wholly understand your question. 回答2: That's what I'm using. For Mozilla the 2nd is working for me, but in my sources I found it with the -moz- prefix, so it doesn't hurt to keep both. -webkit

问题 In CSS3 transitions, you can specify a timing function as 'cubic-bezier:(0.25, 0.3, 0.8, 1.0)' In that string, you are only specifying the XY for points P1 and P2 along the curve, as P0 and P3 are always (0.0, 0.0), and (1.0, 1.0) respectively. According to Apple's site: x [is] expressed as a fraction of the overall duration and y expressed as a fraction of the overall change My question is how can this be mapped back to a traditional 1 dimensional T value in javascript? -- From Apple docs on

问题 I have a menu with a lava-lamp like underline that looks like this: The underline slides between links when clicking on them. Try a jsfiddle HERE. My only problem is that if you click outside the menu the underline reverts back to it's original state (18%). But I want the underline to stay on the last clicked link when you click outside the menu. I've tried :visited but it doesn't do anything. 回答1: You may be able to do this through CSS, I really don't know. But why don't you just use these 3

问题 Is there any way I can use CSS3 to fade in and out a solid white background of a <div> ? the content should remain visible so just the background should fade. Any ideas using css3 transitions/transforms? thank you for your help. 回答1: Sure, you can use the transition property directly on the background-color : div { background-color: white; /* transition the background-color over 1s with a linear animation */ transition: background-color 1s linear; } /* the :hover that causes the background

问题 So, I made sidebar hidden and shows up when on mouse hover. My question is how to trigger the css transition before the mouse hover on the sidebar, just like in this sidebar link: https://la24.org/vision . how I do that? many thanks 回答1: There are two ways doing it. Javascript - Just toggle expanded class whenever needed. Pure CSS - Sideabar Wrapper and Sidebar element In this case you can trigger your .sidebar animation on .sidebar-wrapper hover: .sidebar-wrapper:hover > .sidebar{ **Your

问题 I have multiple tables which are in one row. When one is selected , it should expand one (until now hidden) column. When it is deselected , it should shrink slowly. I tried it with an CSS Transition, but when there is no text in the cell, the shrinking doesn't work. .column2 { background-color: #ddd; width: 0em; overflow: hidden; -webkit-transition: max-width 1.5s ease ; -moz-transition: max-width 1.5s ease ; transition: max-width 1.5s ease ; max-width: 0em; } table.focus .column2{ -webkit

问题 Okay so I have been doing some renovations to my website and I am trying to make it so on the home page you see several images and what I want to happen is that when you hover over the image it blurs and and text appears in the center of the image . I've been able to make the images blur but the thing is is that all the tutorials and Q&A on Forums that I've found use absolute positioning. When I do that though I end up with all the images stacked on top of each other. I then put divs around

问题 <div class="content-wrapper"> <div class="popup"> <div class="close"> </div> </div> </div> .content-wrapper is relatively positioned and contains all the page content (not just the popup). .popup is absolutely positioned. .close is also absolutely positioned. I have some javascript to move close when the cursor enters popup (so I have a nice close bar appear out the side). The best way I have found to do this is just to move using jQuery animate. Hiding/showing creates a stuttering affect

问题 I have a series of divs that slide down using -webkit-transform from a negative margin-top to a position on the screen. Problem is that they end up where they would normally be sitting if there was no negetive margin-top applied to them. This means if I show the 2nd div it has an empty space the size of the first div above it. To solve this I can apply a negative margin-top to the 2nd div, but I think thats messy. My main concern is that if the height of dropdiv1 changes then I would have to