webサイトのアニメーションが動作しない

デモサイトのコーディングをしていまして、試しにサイトにアップしてみたところiPhone（safari , chrome）の一部のアニメーションが動きませんでした。Androidoは動作確認できました。

丸一日調べてみたのですが、解決に至らなかったのでこちらで質問させていただきました。

動作としては、jsで画面領域に対象の要素が入ったら activeを付与し、要素が左右から出てくるというごく一般的なアニメーションになります。

以下に動作NGの一部のソースコードを載せますので、わかるかた教えていただけないでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<meta http-equiv="X-UA-Compatible" content="IE=edge">
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	<title>test</title>
8	<link rel="stylesheet" href="css.css">
9</head>
10<body>
11	
12	
13	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
14	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
15	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
16	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
17	<div class="area">
18		<div class="slide online">
19			<div class="wrap">
20				<img src="https://code-step.com/demo/html/lp/img/icon-pc.png" alt="">
21				<div class="text-area">
22					<p>オンライン対応</p>
23					<p>24時間いつでも受講できる！</p>
24			</div>
25			</div>
26		</div>
27
28		<div class="slide teacher">
29			<div class="wrap">
30				<img src="https://code-step.com/demo/html/lp/img/icon-teacher.png" alt="">
31				<div class="text-area">
32					<p>講師はネイティブ</p>
33					<p>お気に入りの講師が自由に
34						選べる！</p>
35			</div>
36		
37			</div>
38		</div>
39	</div>
40	<script src="java.js"></script>
41</body>
42</html>

css
1* {
2	margin: 0;
3	padding: 0;
4}
5
6.area {
7	background: blue;
8	width: 100%;
9	height: 360px;
10	position: relative;
11	overflow: hidden;
12}
13
14.slide {
15	display: flex;
16	justify-content: 
17	space-between;
18	align-items: center;
19	background: white;
20	height: 120px;
21	position: absolute;
22	padding: 20px;
23	box-sizing: border-box;
24}
25
26.wrap {
27	display: flex;
28	justify-content: space-between;
29	align-items: center;
30	margin: 0 auto;
31}
32
33.online {
34	top: 40px;
35	right: 16px;
36	left: 0;
37	border-radius: 0 20px 20px 0;
38	
39}
40
41.teacher {
42	top: 200px;
43	right: 0;
44	left: 16px;
45	border-radius: 20px 0 0 20px;
46}
47
48
49.online > .wrap > img {
50	width: 87px;
51	height: 60px;
52	margin-right: 40px;
53}
54
55.teacher > .wrap > img {
56	width: 50px;
57	height: 60px;
58	margin-right: 40px;
59}
60
61.text-area p:first-of-type{
62	font-size: 24px;
63	color: #FF2A2A;
64	font-weight: bold;
65	letter-spacing: 0.1em;
66}
67
68.text-area p:last-of-type {
69	font-size: 18px;
70	letter-spacing: 0.1em;
71	line-height: 1.6;
72}
73
74.slide.online {
75	opacity: 0;
76	-webkit-transform: translateX(-90%);
77	transform: translateX(-90%);
78
79}
80
81.slide.online.active {
82	opacity: 1;
83	-webkit-transform: translateX(0);
84	transform: translateX(0);
85	transition: 0.5s;
86	-webkit-transition: 0.5s;
87}
88
89
90.slide.teacher {
91	opacity: 0;
92	-webkit-transform: translateX(90%);
93	transform: translateX(90%);
94
95}
96
97
98.slide.teacher.active {
99	opacity: 1;
100	-webkit-transform: translateX(0);
101	transform: translateX(0);
102	transition: 0.5s;
103	-webkit-transition: 0.5s;
104
105
106}
107

javascript
1'use strict';
2
3{
4
5
6	const online = document.querySelector('.slide.online');
7
8	const teacher = document.querySelector('.slide.teacher');
9
10	const options = {
11		rootMargin: '0px',
12		threshold: 0.1,
13	};
14
15	const setItemActive = (entries) => {
16		entries.forEach((entry) => {
17			// console.log(entries);
18			if (entry.isIntersecting === true) {
19				console.log(entry);
20				entry.target.classList.add('active');
21			}
22
23			
24		});
25	};
26
27	const observer = new IntersectionObserver(setItemActive, options);
28	
29
30	observer.observe(online);
31
32	observer.observe(teacher);
33}

Lhankor_Mhy

2022/04/12 08:09

「一部のアニメーション」とは具体的には何ですか？

AN3000

2022/04/12 08:20

質問にある画面左右から表示されるアニメーションです。 https://code-step.com/demo/html/lp/ こちらのデモサイトを自身で作成しているのですが、「受験生の声」から下のアニメーションはiPhone（safari , chrome）でも動作していましたが、「BBBが選ばれる理由」下の動作がうまくいかず、要素が表示されませんでした。

m.ts10806

2022/04/12 08:21

>webサイトが表示されないタイトルが現状の要件、起きている問題と合致していません。質問修正してください。

AN3000

2022/04/12 08:31

すみません！今、直しました。ありがとうございます。

Lhankor_Mhy

2022/04/12 08:33

ご提示のコードとご提示のサイトのコードがかなり違うようですが、これはなぜですか？

recal

2022/04/12 08:34

15.4.1に乗ってるsafariだと動いてましたよ。

Lhankor_Mhy

2022/04/12 08:39

もしかして、このページを模写してるとかで、提示のページには問題が起きていないのかな？

AN3000

2022/04/12 08:43

Lhankor_Mhy>>>デザインカンプを見ながらコーディングしたのでオリジナルとは違うコードになっています。 recal>>>私のiPhoneも最新verですが、だめです...

Lhankor_Mhy

2022/04/12 08:57

たぶん、recal さんは、ご提示のオリジナルのページをご覧になったとだと思いますよ。問題を把握しました。

回答1件

ベストアンサー

当方の環境ではこれで大丈夫でした。

js
1    const options = {
2        rootMargin: '0px',
3        threshold: 0.095,
4    };

投稿2022/04/12 08:58

Lhankor_Mhy

総合スコア33714

回答へのコメント

AN3000

2022/04/12 09:09

うまくいきました！！ありがとうございます。ちなみになぜ、thresholdの値を変えられたのですか？

Lhankor_Mhy

2022/04/12 09:11

片っ端から怪しいところをコメントアウトして調べました。

AN3000

2022/04/12 09:15

なるほど。消去法ですね。解決できてよかったです。ありがとうございました。

Lhankor_Mhy

2022/04/12 09:19

ご解決されて何よりですが、0.095 が他のiOSデバイスで必ず安全だとは限らないような気がしますので、お気を付けください。

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.83%

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

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

質問する

ドロップダウンメニューの位置とレイアウトを変更する方法

回答1

クリップ0

更新

2023/05/28

Q&A

解決済

ジャバ教えてください

回答1

クリップ1

更新

2023/05/25

Q&A

解決済

Jquery のイベントの開始について

回答1

クリップ0

更新

2023/05/30

Q&A

解決済

スクロールできるテーブルの一番上の行を固定したい

回答2

クリップ0

更新

2023/05/10

Q&A

解決済

CSSで、hover時にボタンの背景をスライド式に変えたい

回答2

クリップ0

更新

2023/05/25

Q&A

解決済

ハンバーガーメニューの挙動について（transitionが、もとに戻る時には適応されない）

回答2

クリップ0

更新

2023/06/02

Q&A

解決済

CSS position: absolute　が効きません

回答1

クリップ0

更新

2023/05/23

Q&A

解決済

Google Chromeのデベロッパーツールでコード入力してウェブサイト上に反映を確認後にCSSを編集するも反映されない

回答2

クリップ0

更新

2023/05/30

同じタグがついた質問を見る

トップ CSS3に関する質問

webサイトのアニメーションが動作しない

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

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