jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

final move to png

Browse source
This commit is contained in:
Ilya Kantor 2015-04-18 01:40:37 +03:00
parent 0ed8583dc2
commit 90855e8899
43 changed files with 101 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

14
5-animation/2-css-transitions/article.md
View file

@ -158,7 +158,7 @@ stripe.onclick = function() {
График этой "кривой" таков:
<img src="bezier-linear.svg">
<img src="bezier-linear.png">
...Как видно, это просто прямая. По мере того, как проходит время `x`, завершённость анимации `y` равномерно приближается от `0` к `1`.
@ -182,7 +182,7 @@ CSS для анимации:
График этой кривой:
<img src="train-curve.svg">
<img src="train-curve.png">
Как видно, процесс вначале развивается быстро -- кривая резко идёт вверх, а затем всё медленнее, медленнее.
@ -222,10 +222,10 @@ CSS для анимации:
<td>`(0.42, 0, 0.58, 1.0)`</td>
</tr>
<tr>
<td><img src="ease.svg"></td>
<td><img src="ease-in.svg"></td>
<td><img src="ease-out.svg"></td>
<td><img src="ease-in-out.svg"></td>
<td><img src="ease.png"></td>
<td><img src="ease-in.png"></td>
<td><img src="ease-out.png"></td>
<td><img src="ease-in-out.png"></td>
</tr>
</tbody>
</table>
@ -260,7 +260,7 @@ CSS для анимации:
Почему так происходит -- отлично видно, если взглянуть на кривую Безье с указанными опорными точками:
<img src="bezier-train-over.svg">
<img src="bezier-train-over.png">
Мы вынесли координату `y` для второй опорной точки на 1 ниже нуля, а для третьей опорной точки -- на 1 выше единицы, поэтому и кривая вышла за границы "обычного" квадрата. Её значения по `y` вышли из стандартного диапазона `0..1`.