// 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の間だけ
Upload your image, choose your background color, and preview the effect of blending the background image with the color using the background-blend-mode property. Click on the thumbnails to see a larger preview of an effect. Clicking the text icon will allow you to add text to the preview image, and blend it with the background using the mix-blend-mode property. If your browser does not support a p
DEMO デモを追加しました (2015-10-16) http://codepen.io/skwbr/pen/bVoJqw 概要 CSS3のanimation-timing-function: steps(n) が便利なのでGifアニメやJSを使用したPNGシーケンスはもう使わないようにしたいな、という話です。 例えば のようにY方向に100pxの間隔で5コマを並べたSprite画像があるとして、 background-positionでコマ送りアニメーションをさせるときは良くJSが使われていますが、 CSS3の animation-timing-function: steps(n); を使うとその代わりができます。 .hoge { ..... animation: parapara 1s steps(5) 0s infinite; } @keyframes parapara { 0%
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く