css-transitions

问题 I have following HTML: <ul> <li> <a href="#"> <h2>title</h2> </a> </li> <li> <a href="#"> <h2>title</h2> </a> </li> <li> <a href="#"> <h2>title</h2> </a> </li> </ul> CSS ul { list-style: none; text-align: center; } ul li { position: relative; float: right; margin-right: 20px; width: 30%; } ul li { transition: all 0.3s; } ul li:hover { top: -10px; } ul li> a{ color: red; } The question is the transition does not work with moz, it works on webkit. How do I implement this in a cross browser way?

问题 I have an svg with transitions set on it. Now when I add a class to it which has some properties varied then the transition only occur if I add delay between DOMContentLoaded event and addclass event. Here are two example, first with no delay second with an infinitesmall delay: Without Delay: ! function() { window.addEventListener('DOMContentLoaded', function() { var logo2 = document.querySelector("svg"); logo2.classList.add('start'); }); }(); <svg xmlns="http://www.w3.org/2000/svg" viewBox=

问题 Just like http://twitter.github.com/bootstrap, The site what I working on now is responsive. I would like to remove transition animation when I click the collapsed navbar menu button. Above picture is the screenshot of what I'm asking. At TOP-RIGHT-CORNER , there is a three-lined menu button. 回答1: Bootstrap accomplishes the transition animation of the responsive nav bar the same way it does any collapse, which is using a CSS3 transition. To turn off the transition for only the navbar (leaving

问题 I am using CSS3 hover and transitions to show and hide an image. On mobile devices I would like to use the same transition for touch events. Basically, the first touch would perform the hover effect or rollover, and the touch up would perform the roll off. I would like to stay away from using JavaScript to do this. If there is a way to do it with pure CSS3 that would be the best option. 回答1: Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 6 years ago . I'm trying to figure out how the card swipe/flip effect was done as seen on this site: http://catalystconference.com/ (under the "Our Favorites" and similar sections). Can this be accomplished using only CSS? 回答1: Don't rely on text-indent, because it forces the browser to actually render the negative space that

问题 What I'm trying to do is to have on hover transition or animation (can be triggered via javascript with onmouseover or onmouseenter ) that will also be reversible (so the opposite animation should happen on mouse leave) but the opposite animation should have a delay it should be able to reverse in the middle of animation without delay It's hard to describe without showing so please check this codepen that is pretty close to what I'm trying to achieve: http://codepen.io/anon/pen/xROOqO There

问题 I have a div where I want to show the name of a person. I want to only show the person's first name in the normal state. When you hover, the last name should appear on the right of the first name, with its width expanding from 0 to normal width. All this text is aligned to the right. If I apply the transition to the last name span it doesn't even show it. I also tried with max-width (as a guy does here: http://jsfiddle.net/qP5fW/87/ ) but it doesn't work. So I made a wrapper div, used width

问题 This question already has answers here : CSS fade left to right (2 answers) Closed 6 years ago . I am messing around with CSS transitions and am having difficulty getting the effect I want. My idea was to have some text be the same color as the background effectively making it invisible, I was then going to position an image over the text, and use a translation to move the image from left to right. I was then going to sync up the transitions so that as the image passed over a character in the

问题 CSS .horizontalTranslate { -webkit-transition: 3s; } .secondClass { background: red; } HTML <div class='box'></div> JS var box = document.querySelector('.box'); box.addEventListener('webkitTransitionEnd', function(evt) { alert('Finished transition!'); }, false); function transitionBox() { // this works box.className = 'horizontalTranslate'; // this does not work // box.className = 'secondClass horizontalTranslate'; } setTimeout(transitionBox, 100); Why does the transition event not fire when

问题 I am an illustrator making a portfolio site. I'm trying to simply create a rollover css transition with Dreamweaver. I would like it so when you roll over the image the text will rise up to give a description about the image. 回答1: Do you mean something like this - DEMO? What I've done is, I've created two classes ( .pic and .text ). .pic holds the picture and the other class contains the text. The .text class is positioned at the bottom of .pic and it has a height of 0; To make the text