それほど難しくないCSSアニメーション

※ 社内勉強会の発表資料として作っています。

まったく知らないと「どうやって動かしているの！？」と途方もなく難しく感じられるCSSアニメーション。
しかし、CSSアニメーションの考え方自体は、それほど難しくはないです。

# CSSアニメーションの考え方
CSSのプロパティを指定の時間をかけてシームレスに変化させるという機能です。

# CSSアニメーションの実装2種
CSSアニメーションには、CSS TransitionとCSS Animationがあります。

## CSS Transition
CSS Transitionは、指定時間でプロパティを変化させる機能です。
単純な動きのアニメーションを実装するときに利用します。
:hoverや:activeなどのトリガーが必要になります。

## CSS Animation
CSS Animationは、指定時間でプロパティを変化させますが、任意の経過地点の変化を指定できます。
細かい動きのアニメーションを実装するときに利用します。

以下のような書き方をします。
```css
animation: <定義名> <変化時間> <変化のパターン> <開始を遅らす時間> <回数> <再生の向き>;
@keyframes <定義名> {
            <進捗> {
                <プロパティ>: <値>;
                ・・・
            }
            ・・・
        }
```

# CSSアニメーションの例

以下、CSS Animationを使って、例を示します。


## 要素が横に移動
![要素が横に移動.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/e9d54316-b243-be30-754d-b8e675feb4ab.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #f08300;
            animation: test-animation 1s 2s 1 forwards;
        }

        @keyframes test-animation {
            100% {
                left: 300px;
            }
        }
        
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>
```
## 要素が縦に移動
![要素が縦に移動.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/62e051eb-1760-90e9-e40f-4b7f89740b79.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #f08300;
            animation: test-animation 1s 2s 1 forwards;
        }

        @keyframes test-animation {
            100% {
                top: 300px;
            }
        }
        
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>
```
## 要素が伸びる
![要素が伸びる.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/df9b7e2a-eddc-f6ca-6af4-dca66a2e8c9a.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #f08300;
            animation: test-animation 1s 2s 1 forwards;
        }

        @keyframes test-animation {
            100% {
                width: 300px;
            }
        }
        
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>
```
## 要素が縮む
![要素が縮む.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/d56568ae-2c32-5989-84ac-891dd6567359.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 300px;
            height: 100px;
            background-color: #f08300;
            animation: test-animation 1s 2s 1 forwards;
        }

        @keyframes test-animation {
            100% {
                width: 100px;
            }
        }
        
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>
```
## 要素の色が変わる
![要素の色が変わる.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/af413e5e-f17d-9db9-59da-d579930e9ea9.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #f08300;
            animation: test-animation 1s 2s 1 forwards;
        }

        @keyframes test-animation {
            100% {
                background-color: #3BAF75;
            }
        }
        
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>
```
## 要素が回転する
![要素が回転する.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/3d525404-909d-acdc-0150-682bbc8e3c87.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #f08300;
            animation: test-animation 1s 2s 1 forwards;
        }

        @keyframes test-animation {
            100% {
                transform: rotate(360deg);
            }
        }
        
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>
```
## 要素が拡大する
![要素が拡大する.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/c47e437d-9c23-3ea3-c2fa-b42fbbd7769c.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 150px;
            top: 150px;
            width: 100px;
            height: 100px;
            background-color: #f08300;
            animation: test-animation 1s 2s 1 forwards;
        }

        @keyframes test-animation {
            100% {
                transform: scale(3)
            }
        }
        
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>
```
## 要素が縮小する
![要素が縮小する.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/987dbfa1-e007-a4e6-c6c9-1a055aa444be.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 150px;
            top: 150px;
            width: 300px;
            height: 300px;
            background-color: #f08300;
            animation: test-animation 1s 2s 1 forwards;
        }

        @keyframes test-animation {
            100% {
                transform: scale(0.333)
            }
        }
        
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>
```
## 要素がフェードイン
![要素がフェードイン.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/dea470a2-5f82-5b05-0222-652ad423af93.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #f08300;
            opacity: 0;
            animation: test-animation 1s 2s 1 forwards;
        }

        @keyframes test-animation {
            100% {
                opacity: 1;
            }
        }
        
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>
```
## 要素がフェードアウト
![要素がフェードアウト.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/65f30899-daa6-f9ba-99d9-f684cbf62596.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #f08300;
            animation: test-animation 1s 2s 1 forwards;
        }

        @keyframes test-animation {
            100% {
                opacity: 0;
            }
        }
        
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>
```
## 要素が横から縦に移動
![要素が横から縦に移動.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/c9f124f2-c9f2-064b-7466-5f7d080abef5.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #f08300;
            animation: test-animation 1s 2s 1 forwards;
        }

        @keyframes test-animation {
            50% {
                left: 300px;
                top: 50px;
            }
            100% {
                left: 300px;
                top: 300px;
            }
        }
        
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>
```
## 要素が拡縮する
![要素が拡縮する.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/8d4926b2-29e1-2858-d032-a866db1a0e34.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 150px;
            top: 150px;
            width: 100px;
            height: 100px;
            background-color: #f08300;
            animation: test-animation 1s 2s 1 forwards;
        }

        @keyframes test-animation {
            50% {
                transform: scale(3)
            }
            100% {
                transform: scale(1)
            }
        }
        
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>
```
## 四角が回転しながら移動
![四角が回転しながら移動.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/c8db05ba-9688-f1d2-cc0b-1e06e175cb88.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 150px;
            top: 150px;
            width: 100px;
            height: 100px;
            background-color: #f08300;
            animation: test-animation 1s 2s 1 forwards;
        }

        @keyframes test-animation {
            100% {
                left: 300px;
                transform: rotate(360deg);
            }
        }
        
    </style>
</head>
<body>
    <div id="target"></div>
</body>
</html>
```
## 転がりながらはねるボール
![転がりながらはねるボール.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/93c259bb-7b62-d4ef-6fd6-359163cf98b9.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 150px;
            top: 150px;
            width: 100px;
            height: 100px;
            background-color: #f08300;
            border-radius: 50%;
            text-align: center;
            font-size: 70px;
            color: #eae8e1;
            animation: test-animation 4s 2s 1 forwards;
        }

        @keyframes test-animation {
            48% {
                left: 300px;
                top: 150px;
                transform: rotate(360deg);
            }
            49% {
                left: 300px;
                top: 125px;
                transform: rotate(360deg);
            }
            50% {
                left: 300px;
                top: 150px;
                transform: rotate(360deg);
            }
            98% {
                left: 150px;
                top: 150px;
                transform: rotate(0deg);
            }
            99% {
                left: 150px;
                top: 125px;
                transform: rotate(0deg);
            }
            100% {
                left: 150px;
                top: 150px;
                transform: rotate(0deg);
            }
        }
        
    </style>
</head>
<body>
    <div id="target">M</div>
</body>
</html>
```
## 複数のボールをそれぞれに動かす
![複数のボールをそれぞれに動かす.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224267/110d0c3e-2f8c-2164-de03-b366d328445e.gif)
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #target1 {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 50px;
            height: 50px;
            background-color: #f08300;
            border-radius: 50%;
            animation: test-animation 1s 2s 1 forwards;
        }
        
        #target2 {
            position: absolute;
            left: 125px;
            top: 50px;
            width: 50px;
            height: 50px;
            background-color: #f08300;
            border-radius: 50%;
            animation: test-animation 1s 2.2s 1 forwards;
        }
        
        #target3 {
            position: absolute;
            left: 200px;
            top: 50px;
            width: 50px;
            height: 50px;
            background-color: #f08300;
            border-radius: 50%;
            animation: test-animation 1s 2.6s 1 forwards;
        }
        
        #target4 {
            position: absolute;
            left: 275px;
            top: 50px;
            width: 50px;
            height: 50px;
            background-color: #f08300;
            border-radius: 50%;
            animation: test-animation 1s 2.8s 1 forwards;
        }

        @keyframes test-animation {
            100% {
                top: 300px;
                opacity: 0;
            }
        }
        
    </style>
</head>
<body>
    <div id="target1"></div>
    <div id="target2"></div>
    <div id="target3"></div>
    <div id="target4"></div>
</body>
</html>
```