// vender prefixは省略 .hoge { animation: fadein 1s; animation-fill-mode: forwards; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } transitionでやらない、jsを使わないという条件の元だと、たぶんこう書く。でもこれだとAndroid 2.3で上手く動作しない。なぜかと言うと、animation-fill-modeをサポートしていないから(アニメーション終了直後にopacity: 0の状態に戻ってしまう)。 そこで最初から.hoge { opacity: 1; }と記述しておくというハックがある。しかし、これはanimation-delayがなければ上手くいくが、animation-delayを設けると開始からdelayの間だけ
![Android 2.3に対応した、css onlyなdelay付きanimation-fill-modeのpolyfillの作り方 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/279d3c6f4ef22728ede19eeb1396fc2582dab195/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9QW5kcm9pZCUyMDIuMyVFMyU4MSVBQiVFNSVBRiVCRSVFNSVCRiU5QyVFMyU4MSU5NyVFMyU4MSU5RiVFMyU4MCU4MWNzcyUyMG9ubHklRTMlODElQUFkZWxheSVFNCVCQiU5OCVFMyU4MSU4RGFuaW1hdGlvbi1maWxsLW1vZGUlRTMlODElQUVwb2x5ZmlsbCVFMyU4MSVBRSVFNCVCRCU5QyVFMyU4MiU4QSVFNiU5NiVCOSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDU1ODhlZDFlZmMyMGY3NmU5YWY3NGY3OTc1ZDQ4Mjg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaF9kZW1vbiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODk2YjlkZDBhOTQxNjBkNDU4ZmMwMTRiYjliYTM4Mzk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9297e062623aa14c674924dd4f85877e)