guys
I have a problem: i need css style —— animation: spin 1s infinite linear; to works in ie8 and ie9.
The style is for ajax loading animation, you know, it's spinning all the way until ajax request finished.
I searched, but i haven't get the solution.
Do you have any idea?
Thanks in advance.
These browsers do not support this CSS3 features. The safest way around this problem is to find a polyfill or use jQuery. But to support rotations in IE8, you would have to use the Matrix Filter, which is not fun.
My recommendation is to use an animated gif for this loading animation. It is simple and effective. Else you could take a look at http://www.useragentman.com/IETransformsTranslator/
He explains ways of using the Matrix Filter
Related
I want to dive into the wonderful world of .svg animation for the website I'm working for.
I'm looking to do an icon that animates on hover. I have found multiple tutorials that can all help me out, however, I noticed that there are a lot of different ways to achieve an svg animation.
I can find very little info on what is the most supported way to animate an svg. Is it with a js library? The animate tag? css animation?
A js library seems best to me, but I like the idea of using css as well. Can someone tell me more about the browser support of these methods?
There are lots plugins are available to animate svg.few are listed here
snapsvg
GSAP
segmentjs
you can checkout crossbrowser compatibility here.
On the webapp I'm working on me and my team have some users who is experiencing browser crashes when they're using our app. They are then forced to restart the browser. The prolem occurs in all browsers on different OS's. We havent found any plugins in the browsers that could affect this issue. We have been tracking our own logs, windows logs etc. without any findings that could relate to the problem. We also watched the CPU- and Hardrive usage when we succeeded to trigger the problem ourself. But nothing was of the chart. This have made me and my team suspicious that it is GPU were having problem with.
We made some research and found out that animation, transition, opacity, transformation in CSS can trigger CSS crashes. But we don't have the knowledge nor experience to conclude that it's that who is the problem.
We are using hardware accelerating CSS like:
transform: translate3d(0,0,0) translateZ(0);
and some we're also using some CSS rotating keyframe animations:
#keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
On some of the users who are experiencing the browser crashes we've implemented a feature switch. The feature switch removes all transitions, transforms and keyframe animations. They have been telling us that they think the feature switch was a improvement. But we can't tell if it's just placebo or if it really did help.
So before we remove a bunch of transtions and transforms from the app I thought it was worth checking out if there are anyone else experiencing the same problems. All thoughts and ideas are welcome.
It's worth mentioning that our webapp is a one-page-app using knockout.js
I've faced same kind of trouble which was crashing iOS - Safari browser. I wrote some note that time which is pasted in below -
Don't use all in transition property, only use which property you want to animate (avoid transition: all 400ms, try transition: color
400ms, background 400ms)
Use keyframe animation as much as you can
Decrease the size of document
Reduce request and optimize your images
Use translate3D, which will force iOS to use 3D acceleration and better memory allocation.
If you are still out of luck, remove all the transition for iOS and
animate using JS, i know it's expensive when you can't use library
like TweenMax but this is the only solution.
Note: JS animation may affect your animation frame-rate. Using rAF
(request frame animation) may enhance a bit.
*** CSS3 animations are very much in-need for website where animation amount is less and it does output ~60 FPS, but JS does vary based on
device.
Hope you found it useful. I would suggest you to stick with new feature what you've, just try fix it.
Best of luck.
This is a very general question, so I have not provided a code.
I was trying out various CSS animations yesterday, however, I was unable to control any of them using the :hover pseudo element in CSS. I basically wan't to slow the animation when a user brings his/her mouse onto the division.
Pure CSS solution will be appreciated. :) thanks in advance.
There is no "comon way" to do this. You will need to find some workarounds.
The most common workaround to slow a CSS animation down on hover is to apply the same animation on the element and it's parent and pause one on hover with the animation-play-state: paused;. (or the other way around with animation-play-state: running;)
EXAMPLE (comes from this answer : Change the Animation speed on hover)
As you can imagin this can't work for all animations and you will need to be creative in each situation to find a solution for this.
I'm trying to create a count-up animation using CSS3 that starts at a certain number "X" and counts up at a set interval by +1 using an animation sort of like this.
I know its possible to use the animation-duration line as the animation length, and just set the animation-iteration-count to infinite, but is it possible to make it load as "X+1" on each restart of the animation?
Thanks!
A thorough solution with many CSS-only options for counters is this!
It could maybe be done with a pseudo-element where you animate the content attribute, but support of CSS animations on pseudo-elements is still somewhat sketchy.
A JS-free solution would be to put the couting numbers actually in the HTML and then animate between those with
-webkit-animation-timing-function: steps(X);
Example here: JSFiddle
Depending on your feelings towards extra markup I would probably go with a JS solution (there's plenty out there).
As part of a project that needs to support mobile devices, I have been working on mimicking the iPhone toggle control using CSS3. I have the look and feel of the element pretty much there, and am using CSS3 transitions to animate its state change.
When I have the element itself on a page with nothing else, the transition is relatively smooth on iOS. However, when I combine it with other CSS elements on a page, the result in iOS is laggy as anything. It's slightly better than a raw jQuery animation, but not much.
I've set up two test pages to demonstrate what I mean (the difference is hardly noticeable in a regular browser):
Toggle Control on its own > http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html
Combined with other elements > http://ben-major.co.uk/labs/iPhone%20UI/
I am looking for any advice on speeding up the transition in mobile devices. What could be the factors that are slowing down its performance on the full page test?
Any advice and comments welcome.
You have to be careful with this, as it can alter the z-index of the element it's applied to, but adding:
-webkit-transform-style: preserve-3d;
To the element you're applying the transition to, can speed animation up considerably, as it forces the hardware to use hardware acceleration for the animation.
If you do encounter layout bugs, you can just switch your 2d transitions to 3d values, so:
-webkit-transform: translate(100px, 100px)
becomes:
-webkit-transform: translate3d(100px, 100px, 0px)
You can see a demo of how this helps speed things up, at http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#
If after applying this to the element, you see it or elements around it blink upon use, then use:
-webkit-backface-visibility: hidden;
To the element, and that should correct the problem.
These tips have helped me to produce fast, efficient CSS transitions, hope they help. :)
Chrome has recently improved the 2D transition performance, and now this trick is no longer needed. The best thing is that if removed the translate3d you'll no longer have those z-index problems! Use the test to prove. http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/
also you can try will-change: transform; , read more about it here:
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#Browser_compatibility
I think it quite old already but for anyone who still needs tricks to improve the transition performance on mobile device, you can apply :
-webkit-transform: translateZ(0);
to the element you are animating.
This trick is according to this blog : http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/.
I have tried and it works quite well.