teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問HPをスマホで見るとパソコンと異なったプレビューが出ます

編集履歴

質問編集履歴

3

2021/08/11 08:25

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -86,7 +86,7 @@
86
86
 
87
87
 
88
88
 
89
- text{
89
+ .text{
90
90
 
91
91
  font-family: 'arial black';
92
92
 

2

コードの追加

2021/08/11 08:25

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -10,10 +10,206 @@
10
10
 
11
11
  スマホでHTMLのファイルのプレビューを表示すると、cssのテキストアニメーションが適用されなくなります。
12
12
 
13
-
13
+ ### HTML
14
+
15
+ ```HTML
16
+
17
+
18
+
19
+ <div class="cache"></div>
20
+
21
+ <h1 class="text welcome">あ</h1>
22
+
23
+ <p>&nbsp;</p>
24
+
25
+ <p>&nbsp;</p>
26
+
27
+ <p>&nbsp;</p>
28
+
29
+ <h1 class="fade-in01 caption">あ</h1>
30
+
31
+ <p>&nbsp;</p>
32
+
33
+ <p>&nbsp;</p>
34
+
35
+ <h1 class="fade-in01 caption">あ</h1>
36
+
37
+ <p>&nbsp;</p>
38
+
39
+ <p>&nbsp;</p>
40
+
41
+ <h1 class="fade-in01 caption">あ</h1>
42
+
43
+ <p>&nbsp;</p>
44
+
45
+ <p>&nbsp;</p>
46
+
47
+ <h1 class="fade-in01 caption">あ</h1>
48
+
49
+ <p>&nbsp;</p>
50
+
51
+ <p>&nbsp;</p>
52
+
53
+ <h1 class="fade-in01 caption">あ</h1>
54
+
55
+ <p>&nbsp;</p>
56
+
57
+ <h1 class="fade-in01 caption">あ</h1>
58
+
59
+ <p>&nbsp;</p>
60
+
61
+ <p>&nbsp;</p>
62
+
63
+ <h1 class="fade-in01 caption">あ</h1>
64
+
65
+ <p>&nbsp;</p>
66
+
67
+ <p>&nbsp;</p>
68
+
69
+ <h1 class="fade-in01 caption">あ</h1>
70
+
71
+ <p>&nbsp;</p>
72
+
73
+ <h1 class="fade-in01 caption">あ</h1>
74
+
75
+ </div>
76
+
77
+
78
+
79
+ ```
80
+
81
+ ###CSS
82
+
83
+
84
+
85
+ ```CSS
86
+
87
+
88
+
89
+ text{
90
+
91
+ font-family: 'arial black';
92
+
93
+ font-size: 60px;
94
+
95
+ text-align: center;
96
+
97
+ padding: 0;
98
+
99
+ margin: 0;
100
+
101
+ margin-left: 50%;
102
+
103
+ transform: translateX(-200%);
104
+
105
+ opacity: 0;
106
+
107
+ animation: slide-in-anim 1.5s ease-out forwards;
108
+
109
+ }
110
+
111
+
112
+
113
+ @keyframes slide-in-anim {
114
+
115
+ 20% {
116
+
117
+ opacity: 0;
118
+
119
+ }
120
+
121
+ 60% {
122
+
123
+ transform: translateX(-45%);
124
+
125
+ }
126
+
127
+ 75% {
128
+
129
+ transform: translateX(-52%);
130
+
131
+ }
132
+
133
+ 100% {
134
+
135
+ opacity: 1;
136
+
137
+ transform: translateX(-50%);
138
+
139
+ }
140
+
141
+ }
142
+
143
+ .welcome{
144
+
145
+ color: #000;
146
+
147
+ text-align: center;
148
+
149
+ font-family: Noto Sans JP Medium;
150
+
151
+ font-size: 270%;
152
+
153
+ }
154
+
155
+ .fade-in01{
156
+
157
+ font-size:40px;
158
+
159
+ opacity:0;
160
+
161
+ animation-name: sample01;
162
+
163
+ animation-duration: 5s;
164
+
165
+ animation-iteration-count:1;
166
+
167
+ animation-fill-mode: forwards;
168
+
169
+ }
170
+
171
+ @keyframes sample01 {
172
+
173
+ 0% {
174
+
175
+ opacity: 0;
176
+
177
+ color:#000;
178
+
179
+ }
180
+
181
+ 90% {
182
+
183
+ opacity: 1;
184
+
185
+ color:#000;
186
+
187
+ }
188
+
189
+ 100% {
190
+
191
+ opacity: 1;
192
+
193
+ color:rgb(0, 0, 0);
194
+
195
+ }
196
+
197
+ }
198
+
199
+ .caption{
200
+
201
+ text-align: center;
202
+
203
+ font-family: Noto Sans JP;
204
+
205
+ font-size: 200%;
206
+
207
+ }
208
+
209
+
210
+
211
+ ```
14
212
 
15
213
  ### 補足情報
16
214
 
17
-
18
-
19
215
  ios14.7.1で純正のファイルアプリで表示させました。アプリが対応してないのでしょうか。。。

1

書式ミス

2021/08/10 13:03

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- ### 補足情報（FW/ツールのバージョンなど）
15
+ ### 補足情報
16
16
 
17
17
 
18
18