css-transitions | 易学教程

SVG Filter Transition in Firefox

阅读更多关于 SVG Filter Transition in Firefox

问题 I'm attempting to transition an image from a 50% grey scale filter to its filterless state on hover. The transition doesn't work in firefox however. Is it possible to get the transition running in firefox using only css? img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray alpha(opacity=50); /* IE6-9 */ -webkit-filter: grayscale

Create smooth transition of block elements when removing sibling elements from DOM

阅读更多关于 Create smooth transition of block elements when removing sibling elements from DOM

问题 I have a container that is working similar to notifications in mac os - elements are added to the queue and removed after a certain timeout. This works great but has one jarring visual side effect. When they are removed from the DOM there is a jagged update to the UI as the next element in the stack fills the void created by the previous element. I would like the elements below in the stack to move up into that space smoothly, ideally with css3 but adding a transition: all 0.5s ease-in-out to

Using CSS animation while javascript computes

阅读更多关于 Using CSS animation while javascript computes

问题 I am developping a web application that needs to generate and compute a bunch of arrays at startup. I would like to show a loading page while this occurs, and maybe play a little with css animations, but it seems that CSS animations will hang while javascript is executed. I already have a loading bar that is updated on key events of the processing, but I would like to use css-transitions to smooth it a bit. I was wondering if there is any way to let something animate while the javascript is

CSS3 Transition not working in Chrome anymore

阅读更多关于 CSS3 Transition not working in Chrome anymore

问题 As far as I can remember, I didn't have any problems with the CSS3 transitions working for me, until now. Suddenly (possibly because of a chrome update or other modifications to my code) it has just stopped working in chrome (32.0.1700.77), but still works in all other browsers (and an older version of chrome). @media screen and (max-width: 1325px) { .row-offcanvas { position: absolute; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out

How to convert css3 transition easing to jquery easing function?

阅读更多关于 How to convert css3 transition easing to jquery easing function?

问题 I making a slider for both modern browsers and old browsers too. I use translate3d and transition to make animation in modern browsers which support css3. I use 2d top, left and easing functions for old browser. I use css3 easing from here: http://matthewlein.com/ceaser/ I want to convert it to javascript function for using on old browser. I know there are many easing function out there, but I just want to know how to convert. Is it possible? 回答1: You can use the jQuery Bez plugin for Cubic

CSS Transform Scale makes text blurry

阅读更多关于 CSS Transform Scale makes text blurry

问题 I have a hover effect that when it is triggered, the box enlarges. Only issue i have is that the text seems to blur during the transition and then goes sharp again when 'transformed'. Before posting on here i decided to have a research and came across this post which seems to be the issue with mine as well: How to force re-render after a WebKit 3D transform in Safari http://duopixel.com/stack/scale.html I have applied their answer to my build and still the blurred effect happens. I have

Is there a performance issue with using very large background-position offsets?

阅读更多关于 Is there a performance issue with using very large background-position offsets?

问题 I'm building a progress bar control, and I'm working on the case where it doesn't actually show progress, but just spinning indicator of "something is happening". The design I have for it is basically alternating diagonal stripes, essentially a barber pole kinda like this, but "spinning": With the hopes of offloading as much as I can to the rendering engine, I want to use CSS transitions for this. Supporting old browsers is not a concern for me. So, my first idea was to basically do this:

Cleaning up CSS jitters

阅读更多关于 Cleaning up CSS jitters

问题 I've built these circles that expand a border when there is a mouseover. The only problem I'm getting now is some times the circle will jitter/shake. And it becomes more apparent when I set the transition: all .1s ease-in-out; to more than .2s. Is there a work around to this problem or is that just the way it is? Here's the code in JsFiddle Thanks for any and all help! EDIT : I am transitioning the dimensions (width and height) of the circles to maintain centering. I realize this is causing

jQueryMobile page transition not loading page as it should

阅读更多关于 jQueryMobile page transition not loading page as it should

I am trying to load a page with transition effect on click of a link. I have used jQuery Mobile . Below is my code. <a href="index.html" data-transition="slide">Transition</a> On click of Transition link index.html page should be loaded showing transition effect. Below is the output of index.html that I am trying to load. But problem is that when I click Transition link the index page is not loaded as expected. The loaded page looks like below. When I looked through firebug what is happening, I found that instead of loading complete page what transition is doing that it is putting output of

CSS3 Transitions with toggleClass

阅读更多关于 CSS3 Transitions with toggleClass

问题 I have the -webkit-transition-duration property set on a div, whose height is set by another class. When I use jQuery to toggle the class, it the transition does something funky. It goes all the way up, and then is set to the proper height instead of just moving from 50px height to automatic height which is what I expect it to do. What's the fix for this? Here is a demo: http://jsfiddle.net/XcFxQ/1/ 回答1: This works: http://jsfiddle.net/Eric/XcFxQ/2/ Although the height is not strictly auto.