自由度の高い表現が可能になったCSS3は、簡単なアニメーションや動きをつけることもできます。 今回は、CSSだけでできる動きのあるデザインをピックアップしてご紹介します。 フロントエンジニアの方にとっては、CSSテクニックのレパートリーが増えるだけでなく、コピー&ペーストで手軽に利用できますので、動きのある表現をしたいという時に取り入れてみてはいかがでしょうか。 CSSだけで表現できる動きのあるテクニックまとめ 1.CSS3フルスクリーン背景スライドショー DigitalSkill CSSのみでフルスクリーン背景のスライドショー、タイトル表示をおこなうチュートリアルです。 アニメーション部分は、複数パターンのサンプルデモを公開しています。 2.Fullscreen Overlay Effects codrops クリックすると、フルスクリーンのオーバーレイがかかるエフェクトのサンプルです。
![CSSのみ!動きのあるデザインをコピー&ペーストで実装できるサンプルコード集](https://cdn-ak-scissors.b.st-hatena.com/image/square/b9f6f56d7929f2c29e5400f2d146d58d16df5751/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F3338%2Fog_image%2Fdefault-33f65264ce8017a5152aa83fbb7e6568.png)