映画の予告風テキストアニメーション【UsingOnlyCSS】

2023年1月13日

今回は映画の予告や車のCMでよく見る、テキストアニメーションを紹介します。文字が左から浮き上がっていくアニメーションです。CSSのみで実装できますので、トライしてみてください。

映画の予告風テキストアニメーション【UsingOnlyCSS】

HTML↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>映画の予告風テキストアニメーション【UsingOnlyCSS】</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Apex legends Season05</p>
    <p>2020.5.12 launch</p>
</body>
</html>

CSS↓

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
}
p{
    font-size: 3em;
    text-transform: uppercase;
    letter-spacing: 4px;
    overflow: hidden;
    background: linear-gradient(90deg, #000,#fff,#000);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
}
p:nth-child(1){
    font-size: 4em;
}
@keyframes animate{
    0%{
        background-position: -500%;
    }
    100%{
        background-position: 500%;
    }

}

解説

その1　テキストにグラデーションの背景を作る

background: linear-gradient(90deg, #000,#fff,#000);
background-repeat: no-repeat;
background-size: 80%;

全体の背景色を黒に設定し、テキストにbackground: linear-gradient(90deg, #000,#fff,#000);で水平方向の白黒白の順のグラデーションを作成します。no-repeatで繰り返しを無くし、サイズを80%にしてグラデーションが動くようにします。

その2　アニメーションの作成

animation: animate 3s linear infinite;

@keyframes animate{
    0%{
        background-position: -500%;
    }
    100%{
        background-position: 500%;
    }
}

animation: animate 3s linear infinite;で「animate」と言う名前のアニメーションを設定します。

animateの内容はこうです。初めは水平方向の左側にグラデーションの背景を配置し、最後は右側に配置します。そうすることで、左から右にグラデーションが動きます。animationは3秒間（3s）に一定のスピード（linear）でループさせる（infinite）設定にしています。

その3　テキストで背景を切り抜く＆透過させる

-webkit-background-clip: text;
-webkit-text-fill-color:transparent;

最後に-webkit-background-clip: text;でテキストの形でグラデーションの背景を切り抜きます。このままではテキストの色が背景の上に来ていて、背景が見えないので、-webkit-text-fill-color:transparent;でテキストの色を透明にして背景を見えるようにします。こうすることで、オシャレなテキストアニメーションが出来上がります。