opacityで透過している文字を下から上に濃くなっていくようにしたい

現在JavaScript、CSSでwebサイト上のアニメーションを作っています。
表題の詳細なのですが、数字の「101」という文字をopacityで最初薄くし、
徐々に下から濃くなっていく（メーターが充たされるイメージ）というアニメーションを作りたいです。
しかしY方向にopacityを記述するなどの方法が見当たらず悩んでいます。
どなたかお力を貸していただけないでしょうか。
アニメーションにはanime.jsを使用しております。
そもそも無理なのかもわかっておりません。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>番号</title>
6  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7  <link rel="stylesheet" href="./css/reset.css">
8  <link rel="stylesheet" href="./css/pc/test.css" media="screen and (min-width: 640px)">
9  <link rel="stylesheet" href="./css/sp/test.css" media="screen and (max-width: 640px)">
10</head>
11<body>
12
13    <div id="container">
14
15        <div class="number">
16          101
17        </div>
18
19    </div>
20   
21  <script type="text/javascript" src="./js/anime.min.js"></script>
22  <script type="text/javascript" src="./js/number.js"></script>
23</body>
24</html>

CSS
1
2html,body{
3  text-align: center;
4  height: 100%;
5  width: 100%;
6  overflow: hidden;
7  background-color: #202F4B;
8}
9
10#container{
11  height: 100%;
12  width: 100%;
13  position: relative;
14  font-size: 400px;
15}
16
17.number{
18  position: absolute;
19  top: 35%;
20  right: 35%;
21  font-size: 20vw;
22  font-family: 'Andale Mono';
23  font-weight: lighter;
24  color: #FFFFFF;
25  z-index: 10;
26  text-shadow: 0px 1px 10px #FFFFFF;
27}
28

JavaScript
1var number = anime({
2  targets: '.number',
3  duration: 2000,
4  delay: 800,
5  loop: false,
6  direction: 'normal',
7  easing: 'easeInQuad',
8  opacity: [0.3,1]
9});
10

行動規範の内容に同意します

回答2件

ベストアンサー

background-clip を使えば出来ると思います。

【CSS3でテキストにグラデーションをかける方法 | mariweb】
https://marie-web.design/blog/text-gradation/

【【CSS】テキストにグラデーションを設定する方法｜ Into the Program】
https://into-the-program.com/gradient-text/

投稿2019/10/09 14:24

kei344

総合スコア69596

ajisainoalibi

2019/10/09 14:29

ご回答ありがとうございます。やはりclipで切り抜いて背景を動かす方法しかないんですね。。。

kei344

2019/10/09 14:34

試してなんらか問題が有ったのであれば質問文に追記してください。回答者が捨てた選択肢を回答者は知りません。【質問するときのヒント｜teratail（テラテイル）】 https://teratail.com/help/question-tips#questionTips2-1 > 2-1. 今置かれている状況を整理し、わかっている範囲とわからない範囲を明確にしましょう

ajisainoalibi

2019/10/09 15:10 編集

ありがとうございます。 opacityを使ってやる方法ないのか、という質問でしたのでclipでの方法は記載しませんでしたが、最終結果が同じであればclipする方法が回答としてくる可能性は充分あり、また他の質問の場合でも同様のことが言えるのできちんと試した内容は全て記載せよという事ですね。理解いたしました。

行動規範の内容に同意します