css-transitions | 易学教程

css3 background-size cover to percentage animation zoom

阅读更多关于 css3 background-size cover to percentage animation zoom

问题 Im trying to make a zoom effect with background-size. The issue I have is I need to animate from background-size:cover to something like background-size: 105%. When I try this it with a "transition: 0.1s background-size linear" it animates from 0 to 104%. Is there anyway I can animate from cover to that percentage with out going back to 0. (im using cover because I don't know the size of the image but I have a fixed size div to display it in.) Thanks Pete 回答1: One posibility is to have the

matrix scale transition not working

阅读更多关于 matrix scale transition not working

问题 I have to use the transform matrix to animate transform: scale of an element. I want to scale from 0 to 1. If I use the following code it works properly: .container { width: 200px; height: 100px; background: yellow; transform: scale(0); transition: transform 1s; } .container.open { transform: scale(1); } https://jsfiddle.net/w4kuth78/1/ If I use the matrix itself, it is not working. .container { width: 200px; height: 100px; background: yellow; transform: matrix(0, 0, 0, 0, 0, 0); transition:

CSS3 transitions chaining

阅读更多关于 CSS3 transitions chaining

问题 What is a syntactically clean solution to run a chain of individual CSS3 transitions on a single element, one by one? An example: set left to 10px and opacity to 1 through 200ms set left to 30px through 500ms set left to 50px and opacity to 0 through 200ms Can this be done without JavaScript? If not, how to code it cleanly with JavaScript? 回答1: I believe you want a CSS3 animation where you define the CSS styles at different points in the animation and the browser does the tweening for you.

Css3 transition on scale only

阅读更多关于 Css3 transition on scale only

问题 I am missing something obvious. But the transition on only one element isn't working here. Here's my code. #navigatore-servizi ul li a { color: #fff; text-decoration: none; text-shadow: 0 -1px 0 #008; display:block; width:240px; height:96px; background:#000; background-position: top center; line-height: 96px; font-family: sans-serif; text-transform: uppercase; text-align: center; -webkit-transition: -moz-transform .3s ease-out; -moz-transition: -webkit-transform .3s ease-out; -o-transition:

Animating jQueryUI Sortable using CSS3 transitions

阅读更多关于 Animating jQueryUI Sortable using CSS3 transitions

问题 How can I use CSS3 transitions (or any other means) to make a jQuery Sortable act more like the list re-ordering in iOS, where list items smoothly animate while dragging, so items scurry out of the way as you drag? [editing to turn this into an FAQ and save time for anyone else who wants to figure this out] 回答1: https://gist.github.com/801570 shows how to smoothly animate dragging using jQuery Sortable. Items scurry out of the way as you drag. It uses CSS3 Transitions and the effect was

Best method for creating a pure HTML5 + CSS3 animated “sonar wave” icon.

阅读更多关于 Best method for creating a pure HTML5 + CSS3 animated “sonar wave” icon.

问题 I've created the following animated icon here: http://jsfiddle.net/KphgD/9 Does anyone have any experience designing a comparable icon or have any suggestions on making this better, more "realistic"? I would be open to using javascript perhaps to increment the animations so that each curve moves outward at an increasing rate. 回答1: Status Update: Firefox v14.0.1 fails to render this Answer (and jsFiddle's in messages) correctly. Use Firefox version prior to v14.0.1 or stable v15.0 Looking at

How to animate an element on hover

阅读更多关于 How to animate an element on hover

问题 How can I make my <div> elements grow (and the content changes text size to a higher one), when hovered over? I put them in a class and tried: size: 150%; and height: +30px; width: +30px; the first try didn't work at all, and the second code just made the div's flash and dissappear partially. 回答1: CSS3 solution: div { background: #999; width: 200px; height: 20px; transition: width 1s; } div:hover{ width: 300px; } <div> <p>Im content</p> </div> http://jsfiddle.net/MrdvW/ 回答2: Using CSS you can

Hide element after fade out using only CSS

阅读更多关于 Hide element after fade out using only CSS

问题 I have a one pager that shows one page at a time and that uses animation when transitioning from one page to the next. It works like this: The user clicks on a button An ajax call is done and while waiting for the response the page fades out (opacity: 0) If 500 msec after the fade out finishes we have no response from the server a spinner fades in and stays there until the ajax call finishes When receiving the response the spinner is faded out and the new page fades in. I currently use a CSS

Is there a more efficient way to do multi-step animations?

阅读更多关于 Is there a more efficient way to do multi-step animations?

Im trying to make transitions very similar to what I have in the code example below. It works pretty well here, but when I use it on the real site it almost never works. Some transition-delays seem to be skipped and its not smooth like in this simplified example. On the site i'm trying to make this as part of a slideshow transition so other transitions are happening at the same time so i'm thinking the GPU can't handle the way I have it set up. Is there another way to accomplish this so that i'm not transitioning each div separately? Can I make one transition not start until the previous one

Need to fadeIn each circle 1 after the other with jQuery

阅读更多关于 Need to fadeIn each circle 1 after the other with jQuery

问题 This is a expansion on to a previous question that got answered yesterday, which can be found here: Expanding circles with CSS3 animations But now the client has requested that can each circle and the text fade in one after the other but keeping the growing animation. I am using CSS3 transitions to grow the circle but I'm now thinking that I now need to do the animation with jQuery? You can see what I have currently here: http://thomasbritton.co.uk/projects/ebrd/ Here is my current js: