css-transitions | 易学教程

Create easy function 40% off set

阅读更多关于 Create easy function 40% off set

问题 I have animation follows this timing function: cubic-bezier(0.25, 0.1, 0.25, 1.0) I want to mod this function so i just get the ending 40% of it. To make things easy lets just say I want the end 50% of the function. How can I do this. So graphically this is what it is: https://developer.mozilla.org/files/3429/cubic-bezier,ease.png and I want to to make a cubic-bezier with parameters such that graphically we only see the top portion, so what we see from 0.5 to 1 (on the yaxist) porition of

CSS transition doesn't start/callback isn't called

阅读更多关于 CSS transition doesn't start/callback isn't called

问题 I have a large game project that used extensive jquery in its code. Some time ago I stripped out all of the jquery and replaced it with pure JS, but the one thing I had trouble with was replacing the .animation calls for projectiles in the game. It appeared that I should replace them with CSS transitions, and the game needed to know when the transition was done, so I needed to add a callback to the transition. All well and good, except when I assigned new location values for the projectile,

when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I'm animating an element with a border

阅读更多关于 when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I'm animating an element with a border

http://jsfiddle.net/nicktheandroid/5Ytnj/ When I add -webkit-backface-visibility: hidden; to the .circ element, it causes it to stay pixelated even after the animation is complete. I'm wondering if there's a way to get it to not pixelate while animating. I've viewing it in the dev version of Google Chrome. Okay so i think i've come up with a work around; essentially; don't use "scale". use "scale3d" and have it setup so that the largest you want the image is scale3d(1,1,1) . Here is an example with the circle thing you had in there. I changed the scale to 5, because i didn't want to put 0

very simple JavaScript / jQuery example: unexpected evaluation order of instructions

阅读更多关于 very simple JavaScript / jQuery example: unexpected evaluation order of instructions

问题 I am surprised by the fact that a CSS3 transition rule applied via jQuery after a jQuery-based CSS property change actually animates this property change. Please have a look at http://jsfiddle.net/zwatf/3/ : Initially, a div is styled by two classes and has a certain height (200px) due to the default CSS properties of these two classes. The height is then modified with jQuery via removal of one class: $('.container').removeClass('active'); This reduces the height from 200px to 15px. After

How do I use transitionend in jQuery?

阅读更多关于 How do I use transitionend in jQuery?

I need to detect if a CSS transition is completed before allowing a function to repeat again, to prevent messing up the margins. So how cam I have something like if (transitionend == true) { // do stuff } else { // do nothing } xram The code below will trigger on the transitionend event for whatever element(s) you have in the $element variable. There are four different event names as I believe these cover all of the cross-browser inconsistencies. Replace the '// your event handler' comment with whatever code you wish to run when the event is triggered. $element.on('transitionend

css transitions on new elements

阅读更多关于 css transitions on new elements

I cannot find a way to use css transitions on newly created dom elements. let's say I have an empty html document. <body> <p><a href="#" onclick="return f();">click</a></p> </body> I also have this css #id { -moz-transition-property: opacity; -moz-transition-duration: 5s; opacity: 0; } #id.class { opacity: 1; } and this js function f() { var a = document.createElement('a'); a.id = 'id'; a.text = ' fading in?'; document.getElementsByTagName('p')[0].appendChild(a); // at this point I expect the span element to be with opacity=0 a.className = 'class'; // now I expect the css transition to go and

CSS Fade Between Background Images on Hover

阅读更多关于 CSS Fade Between Background Images on Hover

问题 Is there a way that I can do the following? I have a transparent png sprite that shows a standard picture on the left, and a picture for the :hover state on the right. Is there a way that I can have the image fade from the left image into the right image on :hover using only css3 transitions? I've tried the following, but it doesn't work: li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;} li{background:url(/img

CSS transition with visibility not working

阅读更多关于 CSS transition with visibility not working

In the fiddle below, I've a transition on visibility and opacity separately. The latter works but the former doesn't. Moreover, in case of visibility, the transition time is interpreted as delay on hover out. Happens in both Chrome & Firefox. Is this a bug? http://jsfiddle.net/0r218mdo/3/ Case 1: #inner{ visibility:hidden; transition:visibility 1000ms; } #outer:hover #inner{ visibility:visible; } Case 2: #inner1{ opacity:0; transition:opacity 1000ms; } #outer1:hover #inner1{ opacity:1; } This is not a bug - you can only transition on ordinal/calculable properties (an easy way of thinking of

Why does enabling hardware-acceleration in CSS3 slow down performance?

阅读更多关于 Why does enabling hardware-acceleration in CSS3 slow down performance?

I am moving 6000 small div elements in an css3 experiment using a transition from top: 0 to top: 145px to test performance. Using no hardware-acceleration runs smooth on Google Chrome. If I enable hardware-acceleration via translateZ(0) performance becomes horrible. Why is that so? Here is my example code: http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html Update (2014-11-13): Since this question is still attracting attention I'd like to point out that the problem itself still seems to exist although the mentioned stuttering might not be visible anymore in the provided demo on modern

How can I transition height: 0; to height: auto; using CSS?

阅读更多关于 How can I transition height: 0; to height: auto; using CSS?

I am trying to make a <ul> slide down using CSS transitions. The <ul> starts off at height: 0; . On hover, the height is set to height:auto; . However, this is causing it to simply appear, not transition, If I do it from height: 40px; to height: auto; , then it will slide up to height: 0; , and then suddenly jump to the correct height. How else could I do this without using JavaScript? #child0 { height: 0; overflow: hidden; background-color: #dedede; -moz-transition: height 1s ease; -webkit-transition: height 1s ease; -o-transition: height 1s ease; transition: height 1s ease; } #parent0:hover