-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathREADME
112 lines (91 loc) · 3.04 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
========================================
NAME: DelayRemover
AUTHOR: shinriyo
WEB: http://d.hatena.ne.jp/shinriyo/
========================================
・概要
CSS3のdelayが信頼できないので、キーフレームだけで行うためのツールです。
・必須条件
Python3.xがインストールされていること。
・使用方法
1.input.txtに元となるCSSを記述する
コード整形に予め、http://procssor.com/のサービスを使用することを推奨。
例）AN-ani-12079というアニメーションがAN-sObj-12063から呼び出されている場合は
以下を記述します。(※"==="の行は記述しないこと）
========================================================
@-webkit-keyframes AN-ani-12079 {
0% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 0;
-webkit-animation-timing-function: linear;
}
0.01% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 0;
-webkit-animation-timing-function: linear;
}
65.84% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
-webkit-animation-timing-function: linear;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 0;
-webkit-animation-timing-function: linear;
}
}
.run #AN-sObj-12063 {
-webkit-animation-name: AN-ani-12079;
-webkit-animation-duration: 0.18461261261261253s;
-webkit-animation-delay: 0.928s;
-webkit-animation-fill-mode: both;
}
========================================================
2.以下のコマンドを入力する
python delayremover.py
3.output.txtが出来上がる。
=======================================================
@-webkit-keyframes AN-ani-12079 {
83.407% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 0;
-webkit-animation-timing-function: linear;
}
83.409% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 0;
-webkit-animation-timing-function: linear;
}
94.332% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
-webkit-animation-timing-function: linear;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 0;
-webkit-animation-timing-function: linear;
}
}
-webkit-animation-duration: 1.113s;
-webkit-animation-delay: 0;
=======================================================
4.元のCSSアニメーションである@～～の部分で置き換え、もともとあった以下の2行も書き換えます。
-webkit-animation-duration: 1.113s;
-webkit-animation-delay: 0;
5.「0%」の部分を最初の～%をコピーしたものを追加することで完了。
=======================================================
@-webkit-keyframes AN-ani-12079 {
0% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 0;
-webkit-animation-timing-function: linear;
}
83.407% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 0;
-webkit-animation-timing-function: linear;
}
=======================================================
=======================================================