cssのanimationでフェードイン/アウト : (*x).b=z->a+y/c
CSSでアニメーションするにはtransitionもありますが今回は animationを使う方法です このページでは手抜きのため ベンダープレフィックスは-webkitだけ書いてますが必要に応じて-mozなどをつけてください animationの使いかた /* キーフレームを作成 */ @-webkit-keyframes fadein { 0%{ opacity:0; } 75%{ opacity:0.5; } 100% { opacity:1; } } /* キーフレームをanimationプロパティで指定 */ div#in{ -webkit-animation: fadein 3s linear 0s 1; } key-framesは0%や100%などの%ごとにスタイルを指定します 0%が最初で100%最後のフレームです 0%から100%の間で途中経過を指定できます 50%ならち
CSSアニメーション 入門 - Qiita
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
E:checked－CSS3リファレンス
E:checkedは、疑似クラスの一種で、 チェックされているユーザーインターフェース要素にスタイルを適用する際に使用します。 ユーザーインターフェース要素とは、フォーム部品などのユーザーが操作できる要素のことです。 E:checkedでスタイル適用の対象にできるのは、例えば、<input>で作成する ラジオボタンや チェックボックスなどで、 これらの要素にチェックを入れてある場合にスタイルが適用されます。 ■セレクタの書式・スタイルを適用する対象 スタイルシート部分は外部ファイル（sample.css）に記述。 input[type="radio"]:checked {outline: inset 6px #ffff00;} input[type="checkbox"]:checked {outline: inset 6px #ffff00;} HTMLソース <html> <head>
CSSだけで実装！画像をクリックしてポップアップ表示する方法
Twitter facebook Google+ LINE こんにちは。ビータイズのWeb職人まいたけです。 今回は、なんとCSSだけで簡単にポップアップを表示する方法をご紹介します。 JavascriptやCSSのプラグインも不要なので、環境を選ばずサクサク利用できます。 少しだけ難易度が高いですが、いつもの通りサンプルコードをコピペで試してみて、慣れたらカスタマイズしていきましょう。 ※ブラウザや端末によってはうまく動かない場合もありますので、実装環境の確認・実機テストを必ずしてください。 ※本ページの内容は、html及びCSSの基本を理解していることを前提に掲載しています。 それぞれ基本知識をまとめた記事もありますので、ホームページ作成やhtml、CSSにあまり詳しくない方、学び始めたばかりの方はこちらも参考にしてみてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
