teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問IEでcssアニメーションが動かないです。

編集履歴

質問編集履歴

3

htmlの修正

2019/02/04 03:05

投稿

donkuri
donkuri

スコア81

test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- <p>動かす文字</p>
33
+ <p class="swing">動かす文字</p>
34
34
 
35
35
 
36
36
 

2

ベンダープレフィックスを修正しました。

2019/02/04 03:05

投稿

donkuri
donkuri

スコア81

test CHANGED
File without changes
test CHANGED
@@ -76,29 +76,29 @@
76
76
 
77
77
  0%,100% {
78
78
 
79
- -webkit-transform-origin: bottom center;
79
+ transform-origin: bottom center;
80
80
 
81
81
  }
82
82
 
83
- 10% { -webkit-transform: rotate(-7deg); }
83
+ 10% { transform: rotate(-7deg); }
84
84
 
85
- 20% { -webkit-transform: rotate(5deg); }
85
+ 20% { transform: rotate(5deg); }
86
86
 
87
- 30% { -webkit-transform: rotate(-2deg); }
87
+ 30% { transform: rotate(-2deg); }
88
88
 
89
- 40% { -webkit-transform: rotate(1deg); }
89
+ 40% { transform: rotate(1deg); }
90
90
 
91
- 50% { -webkit-transform: rotate(0deg); }
91
+ 50% { transform: rotate(0deg); }
92
92
 
93
- 60% { -webkit-transform: rotate(0deg); }
93
+ 60% { transform: rotate(0deg); }
94
94
 
95
- 70% { -webkit-transform: rotate(0deg); }
95
+ 70% { transform: rotate(0deg); }
96
96
 
97
- 80% { -webkit-transform: rotate(0deg); }
97
+ 80% { transform: rotate(0deg); }
98
98
 
99
- 90% { -webkit-transform: rotate(0deg); }
99
+ 90% { transform: rotate(0deg); }
100
100
 
101
- 100% { -webkit-transform: rotate(0deg); }
101
+ 100% { transform: rotate(0deg); }
102
102
 
103
103
  }
104
104
 
@@ -108,29 +108,29 @@
108
108
 
109
109
  0%,100% {
110
110
 
111
- -webkit-transform-origin: bottom center;
111
+ transform-origin: bottom center;
112
112
 
113
113
  }
114
114
 
115
- 10% { -webkit-transform: rotate(-7deg); }
115
+ 10% { transform: rotate(-7deg); }
116
116
 
117
- 20% { -webkit-transform: rotate(5deg); }
117
+ 20% { transform: rotate(5deg); }
118
118
 
119
- 30% { -webkit-transform: rotate(-2deg); }
119
+ 30% { transform: rotate(-2deg); }
120
120
 
121
- 40% { -webkit-transform: rotate(1deg); }
121
+ 40% { transform: rotate(1deg); }
122
122
 
123
- 50% { -webkit-transform: rotate(0deg); }
123
+ 50% { transform: rotate(0deg); }
124
124
 
125
- 60% { -webkit-transform: rotate(0deg); }
125
+ 60% { transform: rotate(0deg); }
126
126
 
127
- 70% { -webkit-transform: rotate(0deg); }
127
+ 70% { transform: rotate(0deg); }
128
128
 
129
- 80% { -webkit-transform: rotate(0deg); }
129
+ 80% { transform: rotate(0deg); }
130
130
 
131
- 90% { -webkit-transform: rotate(0deg); }
131
+ 90% { transform: rotate(0deg); }
132
132
 
133
- 100% { -webkit-transform: rotate(0deg); }
133
+ 100% { transform: rotate(0deg); }
134
134
 
135
135
  }
136
136
 
@@ -140,29 +140,29 @@
140
140
 
141
141
  0%,100% {
142
142
 
143
- -webkit-transform-origin: bottom center;
143
+ transform-origin: bottom center;
144
144
 
145
145
  }
146
146
 
147
- 10% { -webkit-transform: rotate(-7deg); }
147
+ 10% { transform: rotate(-7deg); }
148
148
 
149
- 20% { -webkit-transform: rotate(5deg); }
149
+ 20% { transform: rotate(5deg); }
150
150
 
151
- 30% { -webkit-transform: rotate(-2deg); }
151
+ 30% { transform: rotate(-2deg); }
152
152
 
153
- 40% { -webkit-transform: rotate(1deg); }
153
+ 40% { transform: rotate(1deg); }
154
154
 
155
- 50% { -webkit-transform: rotate(0deg); }
155
+ 50% { transform: rotate(0deg); }
156
156
 
157
- 60% { -webkit-transform: rotate(0deg); }
157
+ 60% { transform: rotate(0deg); }
158
158
 
159
- 70% { -webkit-transform: rotate(0deg); }
159
+ 70% { transform: rotate(0deg); }
160
160
 
161
- 80% { -webkit-transform: rotate(0deg); }
161
+ 80% { transform: rotate(0deg); }
162
162
 
163
- 90% { -webkit-transform: rotate(0deg); }
163
+ 90% { transform: rotate(0deg); }
164
164
 
165
- 100% { -webkit-transform: rotate(0deg); }
165
+ 100% { transform: rotate(0deg); }
166
166
 
167
167
  }
168
168
 

1

ベンダープレフィックスを修正しました。

2019/02/04 02:51

投稿

donkuri
donkuri

スコア81

test CHANGED
File without changes
test CHANGED
@@ -30,6 +30,14 @@
30
30
 
31
31
 
32
32
 
33
+ <p>動かす文字</p>
34
+
35
+
36
+
37
+ ```css
38
+
39
+
40
+
33
41
  .swing {
34
42
 
35
43
  animation-name: swing;
@@ -40,7 +48,61 @@
40
48
 
41
49
  animation-iteration-count: infinite;
42
50
 
51
+
52
+
53
+ -webkit-animation-name: swing;
54
+
55
+ -webkit-animation-duration: 2s;
56
+
57
+ -webkit-animation-delay: .45s;
58
+
59
+ -webkit-animation-iteration-count: infinite;
60
+
61
+
62
+
63
+ -ms-animation-name: swing;
64
+
65
+ -ms-animation-duration: 2s;
66
+
67
+ -ms-animation-delay: .45s;
68
+
69
+ -ms-animation-iteration-count: infinite;
70
+
43
71
  }
72
+
73
+
74
+
75
+ @keyframes swing {
76
+
77
+ 0%,100% {
78
+
79
+ -webkit-transform-origin: bottom center;
80
+
81
+ }
82
+
83
+ 10% { -webkit-transform: rotate(-7deg); }
84
+
85
+ 20% { -webkit-transform: rotate(5deg); }
86
+
87
+ 30% { -webkit-transform: rotate(-2deg); }
88
+
89
+ 40% { -webkit-transform: rotate(1deg); }
90
+
91
+ 50% { -webkit-transform: rotate(0deg); }
92
+
93
+ 60% { -webkit-transform: rotate(0deg); }
94
+
95
+ 70% { -webkit-transform: rotate(0deg); }
96
+
97
+ 80% { -webkit-transform: rotate(0deg); }
98
+
99
+ 90% { -webkit-transform: rotate(0deg); }
100
+
101
+ 100% { -webkit-transform: rotate(0deg); }
102
+
103
+ }
104
+
105
+
44
106
 
45
107
  @-webkit-keyframes swing {
46
108
 
@@ -74,6 +136,40 @@
74
136
 
75
137
 
76
138
 
139
+ @-ms-keyframes swing {
140
+
141
+ 0%,100% {
142
+
143
+ -webkit-transform-origin: bottom center;
144
+
145
+ }
146
+
147
+ 10% { -webkit-transform: rotate(-7deg); }
148
+
149
+ 20% { -webkit-transform: rotate(5deg); }
150
+
151
+ 30% { -webkit-transform: rotate(-2deg); }
152
+
153
+ 40% { -webkit-transform: rotate(1deg); }
154
+
155
+ 50% { -webkit-transform: rotate(0deg); }
156
+
157
+ 60% { -webkit-transform: rotate(0deg); }
158
+
159
+ 70% { -webkit-transform: rotate(0deg); }
160
+
161
+ 80% { -webkit-transform: rotate(0deg); }
162
+
163
+ 90% { -webkit-transform: rotate(0deg); }
164
+
165
+ 100% { -webkit-transform: rotate(0deg); }
166
+
167
+ }
168
+
169
+ ```
170
+
171
+
172
+
77
173
  ### 試したこと
78
174
 
79
175
 
@@ -82,6 +178,16 @@
82
178
 
83
179
 
84
180
 
181
+ アドバイスいただいて、ベンダープレフィックスを修正しました。
182
+
183
+ ここを参考にしました。
184
+
185
+ http://www.htmq.com/css3/animation-name.shtml
186
+
187
+ しかしダメでした。
188
+
189
+
190
+
85
191
  ### 補足情報（FW/ツールのバージョンなど）
86
192
 
87
193