css-transitions

问题 I couldn't manage to find out how to make the CSS width transition work. Well, it actually work, but it just jump from auto to 100% with no animation. Here's my CSS: div#searchbar { padding: 10px; background-color: #404040; } .searchbar input { box-sizing: border-box; padding: 10px; font-family: Open Sans; font-size: 16px; color: #404040; outline: none; background-color: #909090; padding-left: 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } .searchbar

问题 I'm new in using Foundation 5. I'm having difficulties putting transition effects to my top-bar dropdown menu. I can't find which part to put a transition effect. I found one solution that applied to Foundation 4 and tried it to Foundation 5 but it didn't make any effects. Can someone point me which CSS rule for the top-bar dropdown menu should I override. The following is the code that I tried to put in one of the CSS rule for the dropdown menu. It is the solution that I found: .top-bar

问题 The following CSS works fine, however I am trying to add 1 or 2 seconds delay to the flip back effect. When you hover it the '.back' is visible and then when you leave the area the '.front'. I would like to add a delay so that when you leave the area it takes one or two seconds before it goes back to '.front' Is that possible? .panel { width: 250px!important; height: 250px; margin: auto!important; position: relative; -webkit-perspective:1000px; } .card { width: 100%!important; height: 100%;

问题 Fiddle here - I've got some divs that has some css3 transition. Is it possible to apply this transition not for every item at once but for example with 100ms delay after each another item? #main div { opacity: 0; transition: 1s opacity; } #main.active div{ opacity: 1; } So when I'll add .active class to #main , its children will change its opacity not at once, but one after another? I know it can be easly done with $('.setOfItems').each(function(i){ $(this).delay(100*i).doSth() }) But I'm

问题 I want to make an image begin scaled all the way down in x in, and then animate all the way up in x when classes are added (via javascript). The pattern that I am using works well for things like rotate, but I am thinking this is only because rotate goes a full 360 degrees. I am not sure why this does not work: CSS: .scaleXStart { visibility: hidden; z-index: 0; transform:scaleX(.5); } .scaleXEnd { z-index: 3; transform: scaleX(2); transition: transform 1s; } Javascript: a = document

问题 I am trying to transition content with a @keyframes animation when loading and unloading content with Ajax. A active demo is currently here: Test Page I thought maybe I could use no JavaScript but I am not sure if this will work? Could I be wrong in my CSS attempt below instead? /* Animation Settings */ .aniDown { z-index:0; -webkit-animation-name: slideDown; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation

问题 I try to create on hover hyperlink animation. When user hover on the link it will animate the underline. I put the code here : http://codepen.io/elaelation/pen/bkicn It works very well on Chrome & Firefox, but it did not work on Safari. I already put the -webkit-transition for Safari bug, but it still didn't work. Is there anything wrong with my code ? thank you. 回答1: I just found a good article here : http://css-tricks.com/transitions-and-animations-on-css-generated-content/ CSS transition

问题 I set up a jsfiddle here to show some of the inconsistencies I'm noticing. Opera throws 'bonus' transition events for you to dodge... Firefox is probably as it should be, which is still frustrating... Chrome is predictably great , even making assumptions for me like event.target.style["margin-left"] giving the correct value instead of requiring me to use event.target.style[event.propertyName.toCamelCase()] I'd like to know the cleanest possible unified approach to this. Thanks. 回答1:

问题 how can i get a css transition example like in here (the dropdown example), so far I've managed to only change the text and background color, but not the whole transition effect thing (where the rectangle rolls when hovered and rolls back smoothly when un-hovered), any idea how can i achieve it? here's my code: a.menulink { text-decoration: none; color: #000000; background-color: rgb(235,235,185); -webkit-transition: color .25s linear; transition: color .25s linear; transition: background

问题 I have created a button using CSS in which the background color fades lighter on mouseover and immediately becomes darker on mousedown. The problem is that I want to maintain the button's hover state on mouseup without repeating its transition. How can that be done? .btn1 { background-color: #08f; border-top: 0; border-right: 0; border-bottom: 3px solid #048; border-left: 0; border-radius: 20px; color: #fff; font-size: 16pt; padding: 10px 20px; transition: background-color 0.5s; } .btn1:hover