Comments (15)
I imagine this is due to Android Browser not being up to speed with what Webkit supports, as it's not regularly updated, complex animations are probably implemented in beta form. I'm on latest Gingerbread (2.3.4) and the page doesn't even render for me.
from animate.css.
So basically use Jquery as a fallback? Maybe now would be a good time to fork this and have an animate.css and mobile-animate.css?
from animate.css.
I'd rather keep this thing tied up nicely - the premise of the library was to provide cross-browser, cross-platform animations. I'm working on a js/jQuery doodad to provide fallbacks but there's a problem - the JS fallback will only be active on browsers that don't support CSS animation, but Droids will show that it does support them.
from animate.css.
the JS fallback will only be active on browsers that don't support CSS animation, but Droids will show that it does support them.
That's a pretty big problem right now, maybe have the JS/Jquery doodad check the browser agent for mobile and use the fallback then. I mean, it's better that it works properly than to let the browser try to render the animation and mess up.
from animate.css.
That would be a good idea, except iOS has outstanding support for these animations going back 2 OS versions. It would be unfair to those users to take that away (I'm no stranger to the pains of mobile jQuery animations)
from animate.css.
Oh well IIRC you can detect Android specific browser agents, and still allow iOS to use the animations.
from animate.css.
Can you detect versions of android? 4.0 will (hopefully) have much better support.
from animate.css.
I believe you can though I need to research some more (user-agent strings usually include some info on the OS version.)
from animate.css.
Hmm looks like you can, the user-agent of my phone's default browser is
Mozilla/5.0 (Linux; U; Android 2.3.7; en-us; DROIDX Build/VZW) AppleWebKit/533.1 (KHTML, like Gecko) Version 4.0
Mobile Safari/533.1
So I think some regex could just pull the Android ; string out and then display appropriately.
from animate.css.
Alright just ran some tests.
Dolphin HD
Attention Seekers
- Flash - Working
- Bounce - Working
- Shake - Working
- Tada - Not Working
- Swing - Not Working
- Wobble - Working
- Pulse - Not Working
Fading Entrances / Exits
The default fadeIn seems to work just fine
The rest of the fades, don't seem to work properly, they're fading in but they're not displaying any of the movement animations.
I'll update with posts as I test each out (the location of the preview makes it kind of hard to test a few.)
from animate.css.
Firefox for Android supports all the animations. Just tested with the current beta (I believe stable works as well.)
from animate.css.
maybe why odn't using some modernizr to test if browser can or not use css animation and fall back if not ?
from animate.css.
@clawfire because Modernizr will return true for CSS animation on Android - it has support, just not very good.
from animate.css.
X.X yuk
from animate.css.
Various workarounds have been discovered for this, and at the end of the day it's Google's problem. Not ours. Closing.
from animate.css.
Related Issues (20)
- Request for a forwards fill css class parameter HOT 2
- Duplicated property name in animation.css HOT 4
- Animate only if i hit a specific section HOT 2
- Adding AOS HOT 1
- css problem in float property and box model HOT 2
- Akab
- Keep the element at the end of its animation values HOT 1
- copy button to copy code by just one click HOT 12
- Link to Hippocratic license triggers antivirus phishing alert HOT 2
- Request to Add Scroll Animations to the Repository HOT 2
- Animation intensity HOT 2
- Add .animate__animated to all .animate__animationName classes as a requisite in CSS file HOT 3
- Close List Button is not working HOT 1
- Gehe
- blank space in the document section HOT 1
- [FEATURE] Menu Icon Doesn't Hide After Click and Should Change to Cross Icon HOT 4
- License mismatch in github repo source and npmjs HOT 1
- Increase opacity class copy button
- Add copy button on important cade and command
- Animation not working on mobile IOS 17 and above
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from animate.css.