css-transitions

问题 I have the following structure: <div class="service lorange"> <div class="img"></div> <div class="title two-lines"><span>P-Accelerator for Start-Ups</span></div> </div> And the following CSS: .service .img { transition: opacity 300ms; } .service:hover .img { opacity:0 } .service has a rounded border (35px) and overflow: hidden; . This causes the inner .title to have its borders cut-off with its parent's borders (this is the expected behavior). However, during the transition when hovering, and

问题 I have an image that opens in a a lightbox (Colorbox is the script). When the image opens I added a CSS3 Animation. Works great but at first the lightbox has scrollbars which disappear once the animation is complete. How do I prevent the lightbox from showing scrollbars at all? Code: #start{ /* Width and Height of the Image */ width:526px; height:450px; } <div class="hide"> <div id="start"> <img src="/Images/designs/start-large.jpg" class="animated rollIn"> </div> </div> 回答1: You could try to

问题 Here's the jsfiddle that I've been trying to debug: http://jsfiddle.net/Neoheurist/x57fkzng/ HTML <div id="birthday">Surprise Party</div> <p></p> <button onclick="blue()">Blue</button> <button onclick="red()">Red</button> <script> function blue() { element=document.getElementById("birthday"); element.innerHTML="Happy"; element.style.background="blue"; element.style.width="150px"; element.style.opacity="1.0"; element.style.transition="width 2s,background 15s,opacity 2s"; } function red() {

问题 I have a question about SVG background transition problem in Chrome. It works fine & smooth in Firefox, Safari and Internet Explorer but not in Chrome. When I am hovering the button it first shows larger SVG and than it's downgrading to desired size. It's working smooth in all other browsers except Chrome. Please check : jfiddle .button { background: rgba(0, 0, 0, 0.6) url('https://cdn.mediacru.sh/b/bnN8POn3lz8M.svg') top left no-repeat; background-position: center; background-size: 100%

问题 I'm trying to mimic apple's navbar style, specially the CSS3 expanding searchfield. It uses an UL with display:table and it's LI's with display:table-cell and width:100%. When focused the search LI expands and the other LI's contract to fit. Now my li's won't resize. Anybody got a clue on what I'm missing there? Also, IE is not even displaying anything. 回答1: Hey now you can used this one HTML <input type="text" placeholder="search bar"> css input[type="text"] { background: #444; border: 0

问题 I'm playing with transitions and directives. I've created a Card directive that should show a clone of it self in fullscreen when clicked. The transition doesn't happen if I don't apply the altering css class in a timeout. Is that how it should be done? <div ng-app='trans'> <div data-card class='card'>timeout</div> <div data-card='notimeout' class='card'>not timeout</div> </div> Between to original position and the fullscreen mode it should transition with a spin. The goto class is just so

问题 I've a <p> tag and when it starts sliding from left to right it leaves a kind of trail through the screen. I've never seen anything like this before. I'm animating it using jQuery: $(document).ready(function(){ $(".choosenHero").animate({ "right": "300px" }, 3000); }); and here is the screenshot: 回答1: You might try using simple CSS transitions rather than jquery. As jquery does animation by changing css properties and is not the same thing. So use jquery to add a class which has the end state

问题 Given my CodePen https://codepen.io/scottmgerstl/pen/MpMeBy this is my image layout in question <span class="profile-pic-wrapper"> <a href="https://www.google.com" target="_blank"> <img class="profile-pic" src="http://i-cdn.phonearena.com/images/article/67689-image/Video-shows-Super-Mario-64-HD-playing-on-the-Apple-iPhone-6.jpg"/> <span class="profile-pic-overlay"> <span class="social-icon">View Profile</span> </span> </a> </span> Description I am trying to use a CSS transition on a linear

问题 1. I have a 4 column row of divs that move a little when hovered (with margin and padding). How can I keep this movement from moving the content that is below it without adding a fixed height . It is in a fluid layout so with a fixed height that allows enough room for the movement, the content below starts to get too far away as the window width is reduced and the images scale down. 2. For the bounty you need to make the jsFiddle work. It seems that even though I have transition: all , all of

问题 I have developed the following simple HMTL and CSS code which you can also find in de JSFiddle here: body { margin: 0; } .header { width: 80%; height: 10%; margin-left: 10%; position: fixed; top: 0; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: yellow; } .sub_header_01 { width: 100%; height: 100%; float: left; text-align: center; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: blue; } .sub_header_02 { width: 100%; height: