I'm trying to set up a css animation that will work in Chrome, Firefox, Safari and Opera to animate the width of some coloured bars back and forth while retaining the overall width to fit the page.
I set up a demo at http://codepen.io/marblegravy/pen/rxhym
If you open it in Chrome, it works exactly as I want with it sticking to the edges of the page (whatever the width so it will work in a responsive layout).
In Firefox, Safari and Opera however, it appears that the animation-timing-function: linear; or the linear declaration in animation: bulge4 7s infinite alternate-reverse linear; isn't taking effect and the whole thing scales back and forth.
I am using Prefix-free to shortcut the coding on Codepen, but I don't think that's where the problem is.
Any ideas?
You are animating the width trough CSS Tricks/Hacks. As CSS is interpreted different across browsers it will give different results. Also because this is a trick all browsers will interpret it on their own way.
You could make an simular setup trough jQuery Ui. For example animate can also scale sizes of elements, colors etc. In my opinion this is an better and more solid alternative then using CSS Tricks.
More information can be found at http://jqueryui.com/docs/animate
Related
I have recently come across some odd behaviour with Safari in regards to CSS animations and a failure to update an elements position when the DOM is manipulated. I have taken some GIFs that illustrate this:
In Chrome (http://recordit.co/cCim1IwyMc), when animation-delay is updated in the DOM, the browser will update the element's animation position as you would expect.
In Safari (http://recordit.co/3DRmEdo0FC), when animation-delay is updated in the DOM, the browser fails to update the element's animation position.
This seems like a reflow/repaint issue to me. I also noticed that when you hover over the animated element in Safari's inspector, the blue overlay also fails to keep up with the animation.
Here is the code: http://codepen.io/jabes/pen/pNgRrg
I recently stumbled across a similar problem regarding safari and css3 animations, it seems safari has issues overwriting single animation properties when defining the animation using the shorthand pattern. In my case it was the animation-play-state, that could not be changed for safari, so i had to apply the whole animation string at once instead of simply setting animation-play-state: running.
try:
.animator {
width: calc(100% - 100px);
animation: slide 50s linear 1s forwards; /* animation-delay 1s */
}
The delay goes right after the timing function.
I'm trying to create two animated gauges with CSS3 and found a nice solution. The gauges looks perfect in Chrome, Safari and FF but in IE I have a weird bounce effect, which almost seems
The gauges are made with border-radius and clipping.
Here is my code
http://codepen.io/kamante/pen/dyFBL/
I current have transition on all css props of the box of the guauge
transition: 1s all
and I'm suspecting other properties being animated in the process.
How can I target only the rotation on transition, and does anyone have a clue why the box 'jiggles'?
so I'm trying to cast a shadow onto a non-rectangular object in a png file with transparency. That works so far, but when I try to add a transition effect on hovering over the image, the filter seem to max out their set value and then quickly bounce back to the actual set value when the timer from the transition feature is up. I'm running Chrome 28 Mac but also appears on Safari.
I have demonstrated this effect here:
http://jsfiddle.net/dbananas/3pMS8/
transition: all 0.2s ease-in-out;
-webkit-filter: drop-shadow(0px 0px 13px rgba(0, 0, 0, 0.9));
Recommendations anyone who to fix this and make the transitions smooth?
Thanks,
db
I'd check to see if this works and happens in Firefox. If I had to guess, I'd say it's a bug in Webkit (checking in Firefox can help confirm that it's a browser bug and not a bug in your code). You can file a bug report for it here: https://bugs.webkit.org/
That said, in order to work around it, you might have to reconsider how you're going about solving your problem.
For example, if you're doing it for text, you can use the text-shadow property, which is animatable.
If it's an actual image, you could resort to making a "shadow image" that you could fade the opacity on (if you're using this on a content image), or swap to (if you're swapping background images).
Edit I found this tutorial, which may be of use to you. It's an image cross-fade effect, like what I previously suggested. It has a few different variations (including a pure CSS one), so you can probably adapt it to make it work for you. Basically, you add a background to the img, then fade in/out the img element itself to create the effect. I'd agree that it's not ideal (your -webkit-filter technique is arguably superior, if it worked properly in the browsers).
That does look like a bug. It looks like the shadow radius is being treated differently while the animation is in progress (and accelerated filters are applied). I've logged this for Chrome as http://crbug.com/266957
As a workaround, you can apply -webkit-transform: translateZ(0) to the element with the shadow, which will force it to always be accelerated.
I have an issue where my css3 transformations are effecting other elements on the page and even causing them to sort of flicker. I saw another post about this but they didn't have a resolution with the issue.
http://scosha.mybigcommerce.com/w107b/ when you scroll over the navigation you see an animated css3 transformation. It works fine in firefox without flickering but with chrome and safari the effect is very obvious, you see it in the drop down menu items as well as the footer text.
Working solution for flickering elements during transition in Chrome is to set up CSS for parent node:
-webkit-backface-visibility: hidden;
The solution for me was to apply the bellow css to the parent of all affected elements.
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
This is a known issue with Macintosh text rendering on Chrome 22 (and apparently Safari). GPU acceleration causes MacOS to switch from subpixel to greyscale antialiasing which makes the font weight appear to decrease noticeably.
Update:
As the OP notes below, the fix is to apply -webkit-font-smoothing: antialiased - which applies grayscale anti-aliasing at all times. If you do this, you'll probably want to increase your font-weights all around since greyscale anti-aliased text looks notably thinner than sub-pixel
You can get the same effect by applying properties that cause the content to always be GPU accelerated (such as back-face-visibility: hidden) but because these are not guaranteed to cause GPU acceleration in future browser versions - it is more future proofed to simply specify greyscale.
I was having the same issue in Chrome but not Firefox.
The temporary fix is to add a web-kit fix and remove the transition:
-webkit-transition: none;
I've had this CSS for some time, and suddenly I noticed it's not working in new versions of Firfox.
-moz-transition: all .3s, top 0s, left 0s;
So the original idea was opacity & scaling transforms would animate while top and left would not animate. I know using "opacity .3s" will work, but I need my scale transform to work also. I'm also aware of the CSS "zoom" property, but that will not work for my needs.
Basically, I just want this to work and I have no idea why this correct CSS is suddenly broken in Firefox. If anyone has an alternative solution, that would be great.
Ssssup doode,
instead of all put transform. Like this:
-moz-transition: -moz-transform .3s, top 0s, left 0s;
example: http://jsfiddle.net/9J5vc/3/
this is a problem with the lastest versions of Firefox and not your code. I have half a dozen sites that are not properly rendering css in firefox at this time. they were all fine not more than a week ago and no change to the code or codebase was made. the styles still work in other browsers.
Firefox is having issues on thier current release of the browser and I am sure they are all aware of it, but really, if it does not get fixed soon, they will loose even more market share. which would be a shame really.
That is a bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=835007 (similar question: 14533519 and was recently fixed for the Firefox 21 milestone. Until then, you can't use all as part of multiple transitions and have to specify every property separately.
To be fair though, only the most recent W3C draft explicitly states this behaviour; earlier versions were not very clear how this case should be handled.
This works for me..
-moz-transition: bottom .3s, right .3s, top 0s, left 0s;
Also make sure your element is still positioned.