質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

199閲覧

CSSアニメーションをスマホでも機能させる方法で躓いています

yuriyuri_0517

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/05/17 04:40

実現したいこと

CSSアニメーションをスマホでも機能させるようにしたい

前提

CSSでアニメーションを実装しようとしています。
PCでは動いたのですが、スマホでは表示されず困っています。
コードは下記になります。
恐れ入りますが、どなたかお助けいただけると嬉しいです。

・参考
下記サイト5番目のアニメーションを使用しています。
Pure CSS Text Reveal
https://fastcoding.jp/blog/all/info/202104-text-animation/

:root { --delay: 0; --duration: 1200ms; --iterations: 1; } /* •·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */ .reveal-text, .reveal-text::after { animation-delay: var(--animation-delay, 2s); animation-iteration-count: var(--iterations, 1); animation-duration: var(--duration, 1200ms); animation-fill-mode: both; animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); } .reveal-text { --animation-delay: var(--delay, 0); --animation-duration: var(--duration, 1200ms); --animation-iterations: var(--iterations, 1); position: relative; font-size: 10vw; animation-name: clip-text; white-space: nowrap; cursor: default; &::after { content: ""; position: absolute; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; background-color: #07415B; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; animation-name: text-revealer; } } @keyframes clip-text { 0% { clip-path: inset(0 100% 0 0); } 99.9%, to { clip-path: inset(0 0 0 0); } } @keyframes text-revealer { 0% { transform-origin: 0 50%; } 50% { transform-origin: 0 50%; } 60% { transform-origin: 100% 50%; } 60% { transform: scaleX(1); } 99.9%, to{ transform-origin: 100% 50%; } 99.9%, to{ transform: scaleX(0); } }

試したこと

アニメーション関連のCSSを別ファイルで読み込む
初期値や移動前の値を省略せずにきちんと書く

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

現在のところ、CSSネストが使えるブラウザは最新のChrome系に限られてます。SCSSとしてコンパイルしてみてはいかがでしょうか。

Sassなしで入れ子が可能に。CSSネストがブラウザにやってきた
CSS Nesting | Can I use... Support tables for HTML5, CSS3, etc

投稿2023/05/19 02:52

Lhankor_Mhy

総合スコア35869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問