css-transitions

You read that right. Tested on multiple machines in the office and the only difference between scenarios was browser size. A coworker narrowed it down to a 2000px sweet spot. Lo-and-behold when we each resize our browsers to be >= 2000px wide and mouse over an element with a transform animation various elements on the page — specifically any element with a CSS gradient background — will flicker. Inversely, if you resize the browser to be < 2000px wide and mouse over that same element no flickering occurs. Anyone else seen this bizarre behavior? Why is 2000px a magic number, and what exactly

I have a Bezier curve: (0,0) , (.25,.1) , (.25,1) , and (1,1) . This is graphically seen here: http://cubic-bezier.com/#.25,.1,.25,1 We see on the x axis is time. This is my unknown. This is a unit cell. So I was wondering how can I get x when y is 0.5? Thanks I saw this topic: y coordinate for a given x cubic bezier But it loops, I need to avoid something loops So I found this topic: Cubic bezier curves - get Y for given X But I can't figure out how to solve a cubic polynomial in js :( This is mathematically impossible unless you can guarantee that there will only be one y value per x value,

I need help with the solution provided here. Create easy function 40% off set I need to modify it so that the returned left and rights are extrapolated to 1,1 after splitting. This is because if I don't extrapolate, I can't use the returned split cubic-bezier as a css transition. So this is the test I did. Please help because real does not match mike way :( I think the issue is I need to extrapolate the result to 1,1. I can't simply double the values though I'm pretty sure. REAL ease-in-out is cubic-bezier(.42,0,.58,1) and graphically is http://cubic-bezier.com/#.42,0,.58,1 first half is ease

Is there an IE fallback for transform rotateY(180deg)? Need a 3D flip animation! I don't have IE8 to test with but I think this might work: (ie5.5+) filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); http://msdn.microsoft.com/en-us/library/ms532972%28VS.85%29.aspx Matrix Filter for IE could be another option: http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx I got the answer from this site when I was playing with something else: http://snook.ca/archives/html_and_css/css-text-rotation Personally when using IE6-8 the tag that works best for me is display: none ;P I

How to prevent flash on end of transition on filter: blur effect? (I'm using chrome) Snippet below to show problem. $(window).on('load',function( event ){ setTimeout(function(){ $('.sec').addClass('active') },1000) }) .sec { margin: 0 auto; width: 700px; height: 500px; background-image: url(http://placekitten.com/700/500); background-size: cover; -webkit-filter: blur(20px); -moz-filter: blur(20px); -o-filter: blur(20px); -ms-filter: blur(20px); filter: blur(20px); } .sec.active { -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px);

In the following example I created a blinking eyes animation using CSS and an SVG: http://codepen.io/JamesTheHacker/pen/oLZVrY It works fine in chrome, but on Firefox the eyes do not appear unless I specifically provide a width and height attribute on the <rect> . Without the attribute the eyes are not visible. If I add the attribute the CSS height animation has no effect. In SVG 1.1 height and width are attributes i.e. you can't set the height and width via CSS. In SVG 2 it is proposed width and height should be CSS properties. Only Chrome has so far implemented this part of the unfinished

I would like to use the following CSS slider in my project http://jsfiddle.net/63w9jnqq/1/ It does not using any JavaScript or jQuery. When I clicking on the link from any slide other than the 'slide 5' takes me back to the first 'slide 5' instead of opening a new tab. It is CSS heavy code, I have no idea about how to fix it. I have no problem to use extra jQuery or JavaScript to fix this issue. I tried the following jQuery to stop click action, it does not working $(document).ready(function(){ $(".slide-gfx a").click(function(event){ event.preventDefault(); }); }); Pebbl :focus state The