LoginSignup
1
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 1 year has passed since last update.

@msh0x01(m(s)h)

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

Posted at

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

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

CSSアニメーションの考え方

CSSのプロパティを指定の時間をかけてシームレスに変化させるという機能です。

CSSアニメーションの実装2種

CSSアニメーションには、CSS TransitionとCSS Animationがあります。

CSS Transition

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

CSS Animation

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

以下のような書き方をします。

animation: <定義名> <変化時間> <変化のパターン> <開始を遅らす時間> <回数> <再生の向き>;
@keyframes <定義名> {
            <進捗> {
                <プロパティ>: <値>;
                ・・・
            }
            ・・・
        }

CSSアニメーションの例

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

要素が横に移動

要素が横に移動.gif

<!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

<!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

<!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

<!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

<!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

<!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

<!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

<!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

<!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

<!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

<!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

<!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

<!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

<!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

<!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>
1
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
1
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?