on:2014年10月2日sponsorsスクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニックを紹介します。2種類、↓の一つ目から二つ目を想像してみてください。二つ目は、、、上下じゃないです。ボタンをスライドさせ、全体をパタッと開きます。実際の動作は、下記ページでお楽しみください。Button実装のヒントとなったのは下記の記事だそうです。Fundamental見事に再現されていますね。HTML一つ目に紹介したデモ、半分からパタッとなるHTMLから。開く時のテキストの区切れはspanで実装します。</a></article>二つ目のスライドしてパタッと開くのもHTMLの構造は基本的に同じです。</a></article>CSSまずは共通のスタイルシートから。#ebeaea;}半分からパタッとさせるスタイルシートです。rotateY(0.1deg);}スライドしてパタッとさせるスタイルシートです。