手軽なCSSアニメーション！transitionプロパティの使い方（基礎編） | ビジネスとIT活用に役立つ情報（株式会社アーティス）
前回までanimationプロパティによるCSSアニメーションについてご紹介しました。 animationプロパティは@keyframesを設定し、animationプロパティを設定して・・・と簡単なアニメーションを実装するには少し手間がかかります。 もっと手軽にCSSアニメーションを実装したい、そんな時に便利なのがtransitionプロパティです。 今回はtransitionプロパティについて解説していきます。 transitionプロパティとanimationプロパティの違い まずは二つのプロパティの何が違うのかを見ていきましょう。 1.transitionプロパティは@keyframesの設定が必要ない animationプロパティでCSSアニメーションを実装する際は、別途@keyframesで変化していく形状などを記述しておく必要がありました。しかしtransitionでは@ke
Nuxt.jsで使っているBuefyのスタイルをカスタマイズする
BuefyはBulmaというUIコンポーネントセットをベースにしたVue.js用のUIコンポーネントセットです。Bootstrapのようにあらかじめ用意されたHTMLタグやCSSクラスを使うことで簡単にそれなりの見た目になります。ここでは、Vue.jsアプリでBuefyを使えるようにするための準備手順と、最後にmarginやpadding用のクラスをBeufyに追加する方法をメモします。 前提と環境 ここでは、Nuxt.jsにnuxt-buefyをインストールして使っている前提です。 Nuxt.js : 2.9.0 nuxt-buefy: 0.3.14 nuxt-buefyの公式リポジトリは以下です。
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
display: none;のとき要素のサイズが取得できない
display: none;で要素を非表示にした状態のとき、その要素のサイズが取得できない場合があります。 タブやプルダウンなど、display: none;で非表示にすることは多いので、うまくサイズを取得する方法がないか試してみました。 対応しない場合 まずは特に対応していない場合に取得できるかを試してみます。 HTML <div id="sample"> <img src="http://placehold.it/300x100" width="300" height="100" id="sampleImg"> </div> CSS #sample { display: none; width: 300px; height: 200px; } JavaScript var sample = document.getElementById('sample'); console.log('
CSS3 Animation Cheat Sheet - Justin Aguilar
How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about posi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
font-awesome-animation
知っておくと少し幸せになれるBulmaを使い方6選
BootstrapVue — Table Transitions and Sorting
Cheat Sheet
Transit - CSS transitions and transformations for jQuery
Animating from display: none with CSS and callbacks - Matheus Azzi - Developer
Magic Animations CSS3
sdn-project.net