css-transitions | 易学教程

CSS Reverse transition and select previous sibling

阅读更多关于 CSS Reverse transition and select previous sibling

问题 Bootstrap container has two forms horizontally. Hovering over Form1 will increase the width and decreases the width of form2. but reverse is not happening. Any suggestions please. <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs

SVG transition on hover fails in Safari 9.1.2 (11601.7.7)

阅读更多关于 SVG transition on hover fails in Safari 9.1.2 (11601.7.7)

问题 I am trying to fade text and .svg to another color on hover. a{ color: #ff0000; display: inline-block; margin: 0 0 0 1em; text-decoration: none; text-transform: lowercase; transition: color 1s linear; } a:hover{ color: #000; } svg{ vertical-align: middle; width: 2em; } path{ transition: fill 1s linear; fill: #ff0000; } a:hover path{ fill: #000; } <a href="http://example.com" class="tweet-this"> <i class="icon icon-twitter"> <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3

cannot repeat animation - jQuery

阅读更多关于 cannot repeat animation - jQuery

问题 I can't repeat animation with the following example (using jQuery Transit) $("#rotateDiv2").button().click(function() { $('#second').transition({ perspective: '100px', easing: 'snap', duration: '3000ms', rotate3d: '1, 1, 0, 360deg' }); }); It does work, only it work once (when clicking the button of course). the second time i click its doing nothing. Thanx!! 回答1: You can reset the CSS transform property in the callback: http://jsfiddle.net/zA2ZQ/2/ $("#rotateDiv2").button().click(function() {

CSS: Fade-in transition in input text?

阅读更多关于 CSS: Fade-in transition in input text?

问题 Is there a way to write a CSS transition that would fade in an input text element while the user is typing? Currently, text can fade in within a normal HTML text element because we can tell it to transition from 0 to 1 opacity; but input text doesn't exist before a user types it in. So for example, if I type in my username, the letters that I type fade in, each one going from 0 to 1 opacity in .3 seconds. I've tried using transition and animation, but want to keep it within CSS. 回答1: A

CSS Menu Transition

阅读更多关于 CSS Menu Transition

问题 JSFiddle: http://jsfiddle.net/x6bM3/ If you hover over the products link you will see i have created a drop down effect, but what im trying to do is give it a nice transition instead of it just appearing. I have tried using :hover with the css transitions on various parts of the menu, but after researching it i realised the animation wont work with display: none; on it. Please help, Thanks in advance, Adam CSS: nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul {

How to hide elements (with smooth transition) by class with javascript?

阅读更多关于 How to hide elements (with smooth transition) by class with javascript?

问题 I have a group of divs that share the same class ( optionsclass ). The display is set to block . When a user clicks them the following javascript function is executed the display is changed to none . function hideBlockElementsByClass(className) { var elements = document.getElementsByClassName(className); for(i in elements) { elements[i].style.display = "none"; } } The transition between display block and none is quite rough and I would like to make a smoother transition. What's the best

CSS3 slideshow without knowing the number of slides

阅读更多关于 CSS3 slideshow without knowing the number of slides

问题 Since the development of CSS3 , there are growing attempts to create browser-based effects (transitions and animations) merely based on CSS3 without using JavaScript . There are several examples of CSS3 -based slideshows, but one thing is always lacking: The common method for creating CSS3 slideshow is to induce sequencing delay for each slide. Thus, we need to know the number of slides and add a CSS rule for each corresponding element. I am curious if there is another method to cycle a CSS3

transition-delay property in non-chrome browser - does page loading have impact on CSS animations?

阅读更多关于 transition-delay property in non-chrome browser - does page loading have impact on CSS animations?

问题 This is due my attempt to imitate the menu item animation on this site CSS nav ul li{ -webkit-transform: translateY(-40px); transform: translateY(-40px); -webkit-transition-property:all !important ; transition-property:all !important ; -webkit-transition-duration: 800ms !important; transition-duration: 800ms !important; -webkit-transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important; transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important} nav ul li.returned{

CSS3 crossfade bg image when cover is used

阅读更多关于 CSS3 crossfade bg image when cover is used

问题 I am trying to animate/crossfade bg image using CSS3. I know that this works, but only in Chrome for now: .image { width: 100%; height: 100%; background-size: cover; transition: background-image .5s ease-in; background-image: url(../image.jpg); } .image:hover { background-image:url(../image1.jpg; } In Chrome this works nicely, with seamless transition from one image to another. I know that I can animate background-position property using CSS3 keyframes and sprite image, but the problem is

Smooth CSS animation with sprite

阅读更多关于 Smooth CSS animation with sprite

问题 I have tried to animate my sprite and it is similar to this. I would appreciate if someone can show how to make it more smooth. I have only 3 images in my sprite with approx. 1 second delay, so the transition is quite bad. I've tried to use: from { -webkit-transform: translateX(..); } to { -webkit-transform: translateX(..); } But it did not work. I would really appreciate any help. 回答1: try to add some transition effects like : -webkit-transition: all 1s ease; -moz-transition: all 1s ease;