Android & iOS3 CSS3 Animation bug

Tenderfeel

License: MIT License

Fork
5
Fav
5
View
83168
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 58 lines
  • HTML 16 lines
  • CSS 121 lines
^ω^)@keyframeアニメーションで作った スライドインアウトアニメーションだお
webkit, moz, opera に対応(fixedはwebkitのみ)
※OperaMobile&Miniはanimation未対応なので動かない

症状:
アニメーション開始時に一瞬前の状態に戻るときがある。
(イン開始時はアウトが一瞬見えるから白く点滅したように見えて、
アウト開始時はインが一瞬見えるから2回ひっこむように見える)

Android
* 4.0.x ○
* 3.0.1 × L-06C
* 2.3 ○ (端末に依っては×)
* 2.2 × fixed1
* 2.1 ?
* 2.0 ?
* 1.6 △ なる時とならない時がある

iPhone
* iOS4 ○
* iOS 3.1.3 × fixed1

原因:
1: @keyframe の 100%(to)で指定したスタイルが維持されない
2: display:noneを併用した時の影響

回避策:
fixed1: animation-nameと一緒に100%時のスタイルも指定する
fixed2: display:noneのタイミングとズラす
-webkit-backface-visibility:hiddenを付与すると直る場合も。

2の書き方だとスタイルが残るので1の効果もある
  • Android & iOS3 CSS3 Animation bug
  • jQuery v1.6.2
  • Android & iOS3 CSS3 Animation bug

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

Tenderfeel

Author

半角英数だけでふかふかの猫をつくれるようになりたい

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by