Skip to content

Commit

Permalink
[css-easing-1] Reword to refer to easing functions and not assume the…
Browse files Browse the repository at this point in the history 
…y are applied to animations 他

Update changes section
w3c/csswg-drafts@f71545c#diff-ff0ead48f9a08887c7659a034505668d

Reword to refer to easing functions and not assume they are applied to animations
w3c/csswg-drafts@bf3b1d7#diff-ff0ead48f9a08887c7659a034505668d

[css-easing-1] Add privacy and security considerations section
w3c/csswg-drafts@ec14b3a#diff-ff0ead48f9a08887c7659a034505668d
  • Loading branch information
@triple-underscore
triple-underscore committed Apr 8, 2019
1 parent a6b72cf commit 35773dd
Show file tree
Hide file tree
Showing 11 changed files with 408 additions and 383 deletions.
67 changes: 33 additions & 34 deletions css-animations-ja.html
View file
Expand Up @@ -92,31 +92,29 @@

function create_html(match, key, indicator, klass){
if(!indicator) {//%
return '<var>' + match.slice(1) + '</var>';
return `<var>${match.slice(1)}</var>`;
}

let text = key;
let href = '';
let classname = class_map[klass];
let tag = tag_map[klass];

switch(klass){
case 'r': // ref
text = '[' + key + ']';
href = '#biblio-' + key.toLowerCase();
text = `[${key}]`;
href = `#biblio-${key.toLowerCase()}`;
break;
case 'prod': // production
case 't': // typedef
text = '&lt;' + key + '&gt;';
text = `&lt;${key}&gt;`;
break;
case 'at': // at-rule
text = '@' + key;
text = `@${key}`;
break;
case 'ps': // pseudo-class
text = ':' + key;
text = `:${key}`;
break;
case 'pe': // pseudo-element
text = '::' + key;
text = `::${key}`;
break;
case 'm': // IDL member
const n = text.indexOf('(');
Expand All @@ -128,25 +126,26 @@
default:
}

let tag = tag_map[klass];
if(tag) {
text = '<' + tag + (
classname ? ' class="' + classname + '"' : ''
) + '>' + text + '</' + tag + '>';
let classname = class_map[klass];
classname = classname ? ` class="${classname}"` : '';
text = `<${tag}${classname}>${text}</${tag}>`;
}

if(indicator !== '^'){
href = link_map[klass ? (klass + '.' + key) : key] || href;
href = link_map[ klass ? `${klass}.${key}` : key ] || href;
if(!href){
console.log(match); // check error
return match;
}

switch(indicator){
case '$':
text = '<a href="' + href + '">' + text + '</a>';
text = `<a href="${href}">${text}</a>`;
break;
case '@':
text = '<dfn id="' + href.slice(1) + '">' + text + '</dfn>';
text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
break;
}
}
Expand Down Expand Up @@ -311,7 +310,7 @@
過去:past:~
即時:immediate:~
瞬時:instantaneous:~
計時:timing::~:タイミング
easing:

移動-:move::~
移行-:move:~
Expand Down Expand Up @@ -791,7 +790,7 @@
t.single-animation-name:#typedef-single-animation-name
t.single-animation-play-state:#typedef-single-animation-play-state
t.single-animation:#typedef-single-animation
t.timing-function:~CSSEASING#typedef-timing-function
t.easing-function:~CSSEASING#typedef-easing-function

t.declaration-list:~CSSSYN#typedef-declaration-list
t.rule-list:~CSSSYN#typedef-rule-list
Expand All @@ -814,9 +813,9 @@
v.reverse:#valdef-animation-direction-reverse
v.running:#valdef-animation-play-state-running

v.ease-in-out:~CSSEASING#valdef-cubic-bezier-timing-function-ease-in-out
v.ease-in:~CSSEASING#valdef-cubic-bezier-timing-function-ease-in
v.ease-out:~CSSEASING#valdef-cubic-bezier-timing-function-ease-out
v.ease-in-out:~CSSEASING#valdef-cubic-bezier-easing-function-ease-in-out
v.ease-in:~CSSEASING#valdef-cubic-bezier-easing-function-ease-in
v.ease-out:~CSSEASING#valdef-cubic-bezier-easing-function-ease-out
v.start:~CSSEASING#valdef-steps-start

●IDL
Expand Down Expand Up @@ -910,8 +909,8 @@

入力~進捗~値:~CSSEASING#input-progress-value
出力~進捗~値:~CSSEASING#output-progress-value
階段~計時~関数:~CSSEASING#step-timing-function
計時~関数:~CSSEASING#timing-function
階段~easing関数:~CSSEASING#step-easing-function
~easing関数:~CSSEASING#easing-function
段~位置:~CSSEASING#step-position

指定d順:~CSSOM1#concept-declarations-specified-order
Expand Down Expand Up @@ -1653,10 +1652,10 @@ <h2 title="Keyframes">4. ~keyframe</h2>


<section id="timing-functions">
<h3 title="Timing functions for keyframes">4.1.~keyframe用の計時~関数</h3>
<h3 title="Timing functions for keyframes">4.1.~keyframe用の~easing関数</h3>

<p>
それぞれの `~keyframe~style規則$では、~animationが次の~keyframeへ移行するときに利用される`計時~関数$を宣言できる。
それぞれの `~keyframe~style規則$では、~animationが次の~keyframeへ移行するときに利用される`~easing関数$を宣言できる。
◎
A keyframe style rule may also declare the timing function that is to be used as the animation moves to the next keyframe.
</p>
Expand Down Expand Up @@ -1696,10 +1695,10 @@ <h3 title="Timing functions for keyframes">4.1.~keyframe用の計時~関数</h3>
名前 "bounce" の~animationには、 5 個の~keyframeが指定されている。
1 個目と 2 個目の~keyframeの合間（すなわち， 0% 〜 25% ）には，
`ease-out$v
`計時~関数$が利用され、
`~easing関数$が利用され、
2 個目と 3 個目の~keyframeの合間（すなわち， 25% 〜 50% ）には，
`ease-in$v
`計時~関数$が利用される，等々。
`~easing関数$が利用される，等々。
その効果は、次の様に現れることになる：
要素は頁の上方へ `50px^v 移動され,
その最高点に近付くに連れて動きは~~緩められ,
Expand All @@ -1715,7 +1714,7 @@ <h3 title="Timing functions for keyframes">4.1.~keyframe用の計時~関数</h3>
</div>

<p>
"`to^v" （ `100%^v ）~keyframe上に指定されている`計時~関数$は，無視される。
"`to^v" （ `100%^v ）~keyframe上に指定されている`~easing関数$は，無視される。
◎
A timing function specified on the to or 100% keyframe is ignored.
</p>
Expand Down Expand Up @@ -1900,10 +1899,10 @@ <h3 title="The animation-duration property">4.3. `animation-duration^p ~prop</h3
<h3 title="The animation-timing-function property">4.4. `animation-timing-function^p ~prop</h3>

<p>
`animation-timing-function$p ~propは、`計時~関数$
`animation-timing-function$p ~propは、`~easing関数$
— ~animationが 各~keyframe間で どう進捗するか —
を記述する。
計時~関数は、 `CSS-EASING-1$r にて別に定義される。
~easing関数は、 `CSS-EASING-1$r にて別に定義される。
◎
The animation-timing-function property describes how the animation will progress between each pair of keyframes. Timing functions are defined in the separate CSS Easing Functions module [css-easing-1].
</p>
Expand All @@ -1923,7 +1922,7 @@ <h3 title="The animation-timing-function property">4.4. `animation-timing-functi

<p class="note">注記：
この定義は必要とされる
— さもなければ，`計時~関数$が`階段~計時~関数$であって，その`段~位置$が `start$v にされている場合、 `backwards$v による`延伸$の間，関数の最初の段の上端側の`出力~進捗~値$を生産することになるので。
— さもなければ，`~easing関数$が`階段~easing関数$であって，その`段~位置$が `start$v にされている場合、 `backwards$v による`延伸$の間，関数の最初の段の上端側の`出力~進捗~値$を生産することになるので。
◎
Note: This definition is necessary because otherwise a step timing function with a step position of start would produce a backwards fill equal to the top of the first step in the function.
</p>
Expand All @@ -1935,13 +1934,13 @@ <h3 title="The animation-timing-function property">4.4. `animation-timing-functi
</p>

◎名 `animation-timing-function@p
◎値 `timing-function$t#
◎値 `easing-function$t#
◎初 `ease^v
◎適 すべての要素
◎継 されない
◎百 受容しない
◎算
~list：各~itemは 算出された `timing-function$t を与える
~list：各~itemは 算出された `easing-function$t を与える
◎
list, each item a computed &lt;timing-function&gt;
◎順 文法に従う
Expand Down Expand Up @@ -2055,7 +2054,7 @@ <h3 title="The animation-direction property">4.6. `animation-direction^p ~prop</
~propは、~animationを
<span id="_alternate">どの周回において逆再生させるか</span>
を定義する。
~animationが逆再生されるときは`計時~関数$も逆にされる。
~animationが逆再生されるときは`~easing関数$も逆にされる。
例えば，逆再生されたときの `ease-in$v ~animation
【 `animation-timing-function$p の値が `ease-in$v にされた~animation 】
は、 `ease-out$v ~animationとして現れることになる。
Expand Down Expand Up @@ -2380,7 +2379,7 @@ <h3 title="The animation shorthand property">4.10. `animation^p 略式~prop</h3>
<pre class="prod">
`single-animation@t =
`time$t
|| `timing-function$t
|| `easing-function$t
|| `time$t
|| `single-animation-iteration-count$t
|| `single-animation-direction$t
Expand Down

0 comments on commit 35773dd

Please sign in to comment.