質問編集履歴

2

animation-play-state: paused;について

2016/02/19 11:52

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- css3のkeyframeの再生開始位置をjsで制御
1
+ jQueryでcss3のkeyframeのpausedが動作
test CHANGED
@@ -1,40 +1,28 @@
1
- 実現したいことは、css3のkeyframeでアニメーションをさせているのですが、
1
+ hoverでcss3のanimation-play-state: paused;一時停止がれまん。
2
2
 
3
- webページをリロード後、開始位置をramdomで表示させたいです。
4
3
 
4
+
5
- ※(現状はjsでdurationの範囲で-delayで負の値を乱数で表示させております。)
5
+ 原因が分かる方ご教授いただけますでしょうか
6
6
 
7
7
 
8
8
 
9
9
  ```ここに言語を入力
10
10
 
11
- (function () {
11
+ $(function() {
12
12
 
13
- $(function () {
14
-
15
- return $('.thumb-2').css({
13
+ $('.thumb-2').css({
16
14
 
17
15
  'animation': 'move2 20s ease -' + Math.random() * 20 + 's infinite alternate forwards running'});
18
16
 
19
17
  });
20
-
21
-
22
-
23
- $(document).on('click', '.thumb-2', function ()
24
-
25
- { $('.thumb-2').remove();
26
-
27
- $('body').append('<div class="thumb-2"></div>');
28
-
29
- return $('.thumb-2').css({ 'animation': 'move2 20s ease -' + Math.random() * 20 + 's infinite alternate forwards running' });
30
-
31
- });}.call(this));
32
18
 
33
19
  ```
34
20
 
35
21
 
36
22
 
37
23
  ```ここに言語を入力
24
+
25
+
38
26
 
39
27
  [class*='thumb-'] {
40
28
 
@@ -80,36 +68,4 @@
80
68
 
81
69
  }
82
70
 
83
-
84
-
85
- .thumb-2{
86
-
87
- position:absolute;
88
-
89
- bottom:0px;
90
-
91
- left: 0px;
92
-
93
-
94
-
95
- }
96
-
97
-
98
-
99
71
  ```
100
-
101
- 上記のソースは、.onでクリックしたらとなっているのですが、
102
-
103
- 実現したいのは、ページをリロード後ランダムな開始位置に変更したいです。
104
-
105
- clickは不要で参考のサンプルソースを、clickで乱数をするサンプルのため記載されております。
106
-
107
-
108
-
109
- また、hoverをさせると、pausedを設定しているのですが、効かないのでjsの記述に何か問題があると思うのですが、
110
-
111
- ご教授いただけますでしょうか。
112
-
113
-
114
-
115
- よろしくお願いします。

1

cssの記述を一部追記いたしました。

2016/02/19 11:52

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -78,7 +78,23 @@
78
78
 
79
79
 
80
80
 
81
- }
81
+ }
82
+
83
+
84
+
85
+ .thumb-2{
86
+
87
+ position:absolute;
88
+
89
+ bottom:0px;
90
+
91
+ left: 0px;
92
+
93
+
94
+
95
+ }
96
+
97
+
82
98
 
83
99
  ```
84
100