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'?
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 have an element with a -webkit-filter: blur(10px); applied to it. I'm using a CSS animation to move the element up and down with it's translateY property. When the element is animating or transitioning the blur remains but the edges become hard. When the animation or transition ends the the edges become blurred again like they're suppose to. I made a demo that shows examples of the notes that follow it.
Demo: http://jsbin.com/bofahekuko/1/edit?html,css,output
I Tried Fixing it With:
adding -webkit-font-smoothing: subpixel-antialiased; to the animating element.
forcing hardware acceleration on the animating element and adding backface-visibility: hidden on the parent
Things of Note
Happens with both CSS transitions and animations
If you move the element up and down via the CSS top property the blur filter renders correctly.
Browser Testing
Bug appears in Google Chrome (running Version 50.0.2661.86 (64-bit)) as well as in Canary.
Both Firefox and Safari (iOS and Desktop) correctly render the blur filter during the animation.
I'd really like to be able to run the animation with the translateY transition property instead of the top property. If there really isn't a fix it'd still be interesting to know what exactly is going on here to cause the problem.
Thanks in advance for any help on this.
This is a problem that's probably caused by hardware accceleration - the GPU is just moving the original blurred content without updating its background.
To fix, don't use translate or use another trick to disable hardware acceleration (like simultaneously animating margin or padding)
Im making a photogallery, and it works nice in all browsers but Firefox!
In all other browsers but Firefox the page looks like it should, but in firefox it's like the transition effect in CSS on the little examples of the images doesnt work!
I does something weird with opacity..
In the CSS for the little examples of the image, I have an opacity set to 0 in order for the CSS to animate opacity to 1 to make the examples fade up on page load.
If that opacity 0 is set to 1, the transition effect works in Firefox, however the animation is not working as it should...
The CSS code I have for animation and transition is exactly the same for Chrome, IE, Safari and Firefox.. Just used -moz- for Firefox instead, so I can't figure out why it acts different in different browsers.
I created a flipbook animation and have tested it in Chrome, Firefox, and Safari, and you can see it in action here:
http://codepen.io/tcmulder/pen/omyuE
Unfortunately, it isn't working correctly in Safari because after the animation concludes, z-index seems to lose it's power and the leftmost page repositions itself at the top of the stack. It may be related to the issue found here:
css z-index lost after webkit transform translate3d
but the solution suggested doesn't work. I also played around with using rotate3d to change the x coordinates to trick it into a sort of pseudo-z-index overlay, but this doesn't seem to work well either.
How can I get Safari to preserve z-index after the animation concludes?
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