css-transitions

问题 I've answered a question on how to start an animation when hovering the child element and then preserve the applied style until un-hovering the parent. However, I discovered a behaviour in my proposed solution that I can't explain and that I would like to understand. Reading the relevant parts of the specification didn't help me. Here is a minimal example showing the expected behaviour. It works but the properties with comments behind have to be different for some reasons. Otherwise (e.g.

问题 I'm trying to create a div which will show / hide when a button is clicked. The UI Bootstrap page shows a nice simple example that uses a css transition. Here's my fiddle where I copy their code, almost exactly (slight change to make html syntax highlighting work, and a line to declare my "app" in the js). As you can see, it doesn't work as in the example -- there is no transition. Why not? Maybe a css transition rule is needed -- but isn't that part of what bootstrap.css provides? for

问题 I'm trying to create a div which will show / hide when a button is clicked. The UI Bootstrap page shows a nice simple example that uses a css transition. Here's my fiddle where I copy their code, almost exactly (slight change to make html syntax highlighting work, and a line to declare my "app" in the js). As you can see, it doesn't work as in the example -- there is no transition. Why not? Maybe a css transition rule is needed -- but isn't that part of what bootstrap.css provides? for

问题 is it possible to use transitions on webkit scrollbars? I tried: div#main::-webkit-scrollbar-thumb { background: rgba(255,204,102,0.25); -webkit-transition: background 1s; transition: background 1s; } div#main:hover::-webkit-scrollbar-thumb { background: rgba(255,204,102,1); } but it isn't working. Or is it possible to create a similar effect (without javascript)? Here is a jsfiddle showing the rgba transition problem 回答1: It is fairly easy to achieve using Mari M's background-color: inherit;

问题 I have an tag which is displayed as a block. On page load, its width is increased by a css animation from zero to some percentage of the containing div (the fiddle contains a MWE, but there is more than one link in this div, each with a different width). On hover, I want it to change colour, change background colour, and also expand to 100% of the div, using a CSS transition . The colour and background colour bit is working, but it seems to ignore the width transition. Snippet: .home-bar {

问题 I have an tag which is displayed as a block. On page load, its width is increased by a css animation from zero to some percentage of the containing div (the fiddle contains a MWE, but there is more than one link in this div, each with a different width). On hover, I want it to change colour, change background colour, and also expand to 100% of the div, using a CSS transition . The colour and background colour bit is working, but it seems to ignore the width transition. Snippet: .home-bar {

问题 My issue is that during CSS transition border-radius temporarily stops clipping elements inside if transition of overlapping element involves transform . In my case I have two div s absolutely positioned one above the other where the first one has transition triggered by action on clicking a navigation element inside the second one, like: <div id="below"></div> <div id="above"><div id="nav"></div></div> The above div has border-radius: 50% and clips the nav div . In CSS it goes like (minimal

问题 I'm trying to achieve sliding effect with the new ng-animate feature of Angular. I've taken some code from the demo site and have prepared a fiddle. The problem is that elements below the sliding DIV keeps shifting up and down when the item is being swapped from the array. I tried with line-height but no success. Is it possible to fix the above behavior? or any better way to achieve it only with angular and CSS? 回答1: You can wrap the input and the button in a div and also put it in the

问题 I am using some really simple CSS3 transitions in my app like in the following example where I try to slide in a div container from left to right: <div id="navi"> <form> <input>...</input> </form> <ul> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul> </div> <div id="bg"> <img src="..."> <img src="..."> <img src="..."> <img src="..."> <img src="..."> <img src="..."> <img src="...">

问题 How would I make it so a CSS transition doesn't work inside a media-query, or in any other case? For example: @media (min-width: 200px) { element { transition: width 1s; } } @media (min-width: 600px) { element { transition: none; // SET TO NO TRANSITION } } 回答1: You can set the transition-property to none . This way, no transition effect will be applied. Like this: -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none; 回答2: