Go to Qiita Advent Calendar 2024 Top
LoginSignup
7
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Make ITAdvent Calendar 2018Day 11
@yozakura121(j j)

CSSアニメーションを少し触れてみたので紹介

Last updated at Posted at 2018-12-11

#前書きという名の自己紹介
はじめまして。。Make IT アドベントカレンダーの11日を担当しますyozakura121です。明日は@KimuTomoさんよろしくです！
自己紹介って言ってもあまり書くことがなさそうなので今読んでる漫画を一冊紹介させてもらいます。
やがて君になるという漫画なんですが読んでると心がほのぼのするので是非読んでみてください。

初めてこのようなものを書くのでうまく書けるかわかりませんが読んでもらえると幸いです。

#CSSとは・・・
とても初歩的なことですがCSSについて少し説明さてもらいます。
CSSはHTMLと組み合わせて使う言語です。HTMLで付けた要素に装飾などをします。webページなどを見ると文字の色が変わっていたり、大きさなどが違うのはだいたいCSSが使われていると思います。
ここで、この前ネットサーフィンをしてたら見つけたかわいいCSSを紹介させてもらいます。

nes.css
.btn {
    position: relative;
    display: inline-block;
    padding: 10px 12px;
    margin: 4px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #212529;
    background-color: #fff;
    box-shadow: inset -4px -4px #adafbc;
}

.btn:hover,
.btn:focus {
    background-color: #e7e7e7;
    box-shadow: inset -6px -6px #adafbc;
}

.btn:active {
    box-shadow: inset 4px 4px #adafbc;
}

.btn::before,
.btn::after {
    position: absolute;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    content: "";
    border-color: #212529;
    border-style: solid;
    border-width: 4px;
}

.btn::before {
    top: -4px;
    left: 0;
    border-right: 2px;
    border-left: 2px;
}

.btn::after {
    top: 0;
    left: -4px;
    border-top: 2px;
    border-bottom: 2px;
}

.btn:focus {
    outline: 0;
}

.btn.is-primary {
    color: #fff;
    background-color: #209cee;
    box-shadow: inset -4px -4px #006bb3;
}

.btn.is-primary:hover,
.btn.is-primary:focus {
    background-color: #108de0;
    box-shadow: inset -6px -6px #006bb3;
}

.btn.is-primary:active {
    box-shadow: inset 4px 4px #006bb3;
}

.btn.is-success {
    color: #fff;
    background-color: #92cc41;
    box-shadow: inset -4px -4px #4aa52e;
}

.btn.is-success:hover,
.btn.is-success:focus {
    background-color: #76c442;
    box-shadow: inset -6px -6px #4aa52e;
}

.btn.is-success:active {
    box-shadow: inset 4px 4px #4aa52e;
}

.btn.is-warning {
    color: #212529;
    background-color: #f7d51d;
    box-shadow: inset -4px -4px #e59400;
}

.btn.is-warning:hover,
.btn.is-warning:focus {
    background-color: #f2c409;
    box-shadow: inset -6px -6px #e59400;
}

.btn.is-warning:active {
    box-shadow: inset 4px 4px #e59400;
}

.btn.is-error {
    color: #fff;
    background-color: #e76e55;
    box-shadow: inset -4px -4px #8c2022;
}

.btn.is-error:hover,
.btn.is-error:focus {
    background-color: #ce372b;
    box-shadow: inset -6px -6px #8c2022;
}

.btn.is-error:active {
    box-shadow: inset 4px 4px #8c2022;
}

このようなドットのボタンなどができます！他にもあるので見てみてください。
nes.css record1.gif

参考：bc_rikko
#CSSアニメーションについて
前置きが長くなってしまったような気がしますがここからcssアニメーションについて書きたいと思います。
CSS アニメーション は、ある CSS のスタイル設定を別の設定へ遷移させることを可能にします。アニメーションは、2 種類の要素で構成されています。それは、アニメーションについて記述するスタイルと、アニメーションの始めと終わりの CSS スタイルを示すキーフレームです。同様に、アニメーション途中の通過点となるスタイルを示すこともできます。
CSS アニメーションは、従来のスクリプトによるアニメーションに比べて 3 つの長所があります。

####1　javascriptを使わずにアニメーションが作ることができる。
####2　負荷が少ないため低負荷で動かすことができる。
####3　パフォーマンスや効率を最適化してくれる。
#設定
cssアニメーションを作成する際に以下のサブプロパティを使います。
・animation-delay
・animation-direction
・animation-duration
・animation-iteration-count
・animation-name
・animation-none
・animation-play-state
・animation-timing-function
・animation-fill-mode

もう1つTransitionを利用するプロパティもありますが省略させてもらいます。

#実装
今回は3つのanimationを使ったものを紹介したいと思います。
1つ目は文字が横からスライドしてくるものです。

slide.css
  @keyframes RightToLeft {
            0% {
                opacity: 0;
                transform: translateX(50px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        h1 {
            animation-duration: 2s;
            animation-name: RightToLeft;
            animation-iteration-count: infinite;
            color: blue;
        }

実行してみると・・・
slide.css record1.gif

今回は使ったものはこの3種類です。
animation-duration
1 回のアニメーションサイクルに要する時間の長さを設定します。
animation-name
アニメーションのキーフレームを示す ＠keyframes ＠規則の名前を指定します。
animation-iteration-count
アニメーションを繰り返す回数を設定します。アニメーションを無限に繰り返すには infinite を指定します。
2つ目は動いているものにstopを掛けることができるものです。

slide.css
 .box {
            position: relative;
            left: 0;
            width: 100px;
            height: 100px;
            margin-top: 50px;
            border: 50px inset aqua;
            box-sizing: border-box;
            animation: turn_anim 1s linear infinite alternate;
        }
        
        #stop:checked.box {
            animation-play-state: paused;
        }
        
        #reset:active.box {
            animation: none;
        }
        
        @keyframes turn_anim {
            100% {
                left: 100px;
            }
        }

実行すると・・・
stop.css record1.gif
今回使ったのは
animation-play-state
アニメーションを一時停止したり、再開したりすることができます。
最後にグラデーションを紹介します。

slide.css
 body {
            margin: 0;
            font-family: 'Bitter', serif;
            text-align: center;
        }
        
        .holder,
        .first,
        .second,
        .third {
            height: 100vh;
            width: 100vw;
        }
        
        .first,
        .second,
        .third {
            position: absolute;
        }
        
        .second,
        .third {
            opacity: 0;
        }
        
        .holder {
            height: 100vh;
            position: relative;
            z-index: 1;
        }
        
        .first {
            animation: first 10s infinite;
            background: linear-gradient(#3333FF, #9933FF);
            z-index: 10;
        }
        
        @keyframes first {
            0% {
                opacity: 1.0;
            }
            10% {
                opacity: 0.8;
            }
            20% {
                opacity: 0.6;
            }
            30% {
                opacity: 0.4;
            }
            40% {
                opacity: 0.2;
            }
            50% {
                opacity: 0.1;
            }
            60% {
                opacity: 0.2;
            }
            70% {
                opacity: 0.4;
            }
            80% {
                opacity: 0.6;
            }
            90% {
                opacity: 0.8;
            }
            100% {
                opacity: 1.0;
            }
        }
        
        .second {
            animation: second 10s infinite;
            animation-delay: 2s;
            background: linear-gradient(#6633CC, #0066FF);
            z-index: 20;
        }
        
        @keyframes second {
            0% {
                opacity: 0;
            }
            10% {
                opacity: 0.2;
            }
            20% {
                opacity: 0.4;
            }
            30% {
                opacity: 0.6;
            }
            40% {
                opacity: 0.8;
            }
            50% {
                opacity: 1.0;
            }
            60% {
                opacity: 0.8;
            }
            70% {
                opacity: 0.6;
            }
            80% {
                opacity: 0.4;
            }
            90% {
                opacity: 0.2;
            }
            100% {
                opacity: 0;
            }
        }
        
        .third {
            animation: third 10s infinite;
            animation-delay: 8s;
            background: linear-gradient(#993399, #CC66CC);
            z-index: 30;
        }
        
        @keyframes third {
            0% {
                opacity: 0;
            }
            10% {
                opacity: 0.2;
            }
            20% {
                opacity: 0.4;
            }
            30% {
                opacity: 0.6;
            }
            40% {
                opacity: 0.8;
            }
            50% {
                opacity: 1.0;
            }
            60% {
                opacity: 0.8;
            }
            70% {
                opacity: 0.6;
            }
            80% {
                opacity: 0.4;
            }
            90% {
                opacity: 0.2;
            }
            100% {
                opacity: 0;
            }
        }
        
        .txt {
            margin-top: calc(50vh - 43px);
            position: absolute;
            width: 100%;
            z-index: 1000;
        }

実装すると・・・
d.css record1.gif

これで紹介＆実装を終わります。
#まとめ
自分はJSがあまり得意ではないのでCSSをやってみました。CSSだけでもかなり動きのあるものが作れることが伝われば幸いです。JSに比べて書く量は結構あると思いますがくじけずにやっていきましょう。

初めてこのような記事を書いたのでまとまりがないかもしれませんがご容赦ください。

参考サイトMDN web docs

7
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?