[css-d] css3 animation - do hover and focus work on touch screen devices?
hey all,
I continue to noodle away on my css3 animation sampler which I've moved to
http://sandyfeldman.com/resources/css3animation/
all the animations are set to trigger on hover and focus. Now - when you
go to this page using a touch screen device what happens? Is there a way
to trigger the animations?
http://iphonetester.com/
http://ipadpeek.com/
make it look like everything is just fine, but is it really?
If it's not, then is there something I can add like
A#transform:hover, A#transform:focus, A#transform:touch {
-webkit-animation: transform 2s infinite alternate;
-moz-animation: transform 2s infinite alternate;
-ms-animation: transform 2s infinite alternate;
-o-animation: transform 2s infinite alternate;
}
or do I need to use javascript? or something?
thanks,
Sandy
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css3 animation - do hover and focus work on touch screen devices?
On Thu, Jun 28, 2012 at 1:58 PM, Sandy sfeld...@sympatico.ca wrote: I continue to noodle away on my css3 animation sampler which I've moved to http://sandyfeldman.com/resources/css3animation/ Sandy, Some of the animations work, but not all of them, in Android/2.3.6 [a low-end mobile touch screen device]. That's a lot of stuff to ask most any mobile device to handle. Perhaps feeding mobile just a few of those animations might be more appropriate? aside I only looked at your page in portrait-view. The mobile media queries are not kicking-in; consequently, it is simply a reduced width version of desktop-- the top horizontal links and the sidebar links verge on being unreadable and unusable/aside Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css3 animation - do hover and focus work on touch screen devices?
http://sandyfeldman.com/resources/css3animation/ Some of the animations work, but not all of them, in Android/2.3.6 [a low-end mobile touch screen device]. thanks for checking. I did get to see this on an older iPad and iPhone today, and it looks like the ones with a background pattern, border effects or z-index animations don't work. A friend using iOS 5.1.1 on iPhone 5 says he sees all of them. interestingly, I installed Opera 12 beta and that group causes problems for that browser, too. I sent Opera a note about this. Perhaps feeding mobile just a few of those animations might be more appropriate? yeah - the sampler is pretty extreme. It's hard to imagine a real site with that many doodads. aside I only looked at your page in portrait-view. The mobile media queries are not kicking-in; consequently, it is simply a reduced width version of desktop-- the top horizontal links and the sidebar links verge on being unreadable and unusable/aside oh dear. thanks for letting me know. They were working on the iPhone Pad I looked at today. Is there something different I should be doing for Android? meta name=viewport? something else? best regards, Sandy __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css3 animation - do hover and focus work on touch screen devices?
On Thu, Jun 28, 2012 at 7:01 PM, Sandy sfeld...@sympatico.ca wrote: http://sandyfeldman.com/resources/css3animation/ aside I only looked at your page in portrait-view. The mobile media queries are not kicking-in; consequently, it is simply a reduced width version of desktop-- the top horizontal links and the sidebar links verge on being unreadable and unusable/aside oh dear. thanks for letting me know. They were working on the iPhone Pad I looked at today. Is there something different I should be doing for Android? meta name=viewport? something else? Sandy Sandy, My guess is that the method you use is only supported by our good friends and users who have Apple products? Hitting cross-OS, cross-browser, cross-device mobile can be as simple or as complicated as you wish to make it. Fwiw, a rather simple and crude example [note the device width meta tag, one media query, and use of min-width, max-width, width on the outer most wrapper]: http://ccstudi.com/rz.html This is of course is only one of many ways you might achieve the goal.., Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
