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

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-03-04 23:09:07 +03:00
parent 05d35d0d16
commit 951cf3f2ec
152 changed files with 2527 additions and 2179 deletions
Download patch file Download diff file Expand all files Collapse all files

34
5-animation/2-css-transitions/1-animate-logo-css/solution.md
View file

@ -1,28 +1,16 @@
# Алгоритм
Анимируйте одновременно свойства `left/top` и `width/height`.
Чтобы в процессе анимации таблица сохраняла геометрию -- создайте на месте `IMG` временный `DIV` фиксированного размера и переместите `IMG` внутрь него. После анимации можно вернуть как было.
Для начала анимации - добавьте класс изображению:
CSS-код для анимации одновременно `width` и `height`:
```css
.growing {
/* все свойства анимируются 3 секунды */
-webkit-transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
-ms-transition: all 3s;
/* исходный класс */
#flyjet {
transition: all 3s;
}
/* JS добавляет .growing *.
#flyjet.growing {
width: 400px;
height: 240px;
}
```
При этом, чтобы анимация началась, может понадобиться отложить установку класса и новых свойств через `setTimeout(.., 0)`.
Для отлова конца анимации используйте событие `on<browser>TransitionEnd`. Оно сработает несколько раз, для каждого свойства, поэтому чтобы обработчик не вывел "OK" много раз -- можно обрабатывать окончание только при одном `event.propertyName`.
# Похожая задача
Аналогичная задача, решённая средствами JS: [](/task/animate-logo).
# Решение
[edit src="solution" task/]
Небольшая тонкость с окончанием анимации. Соответствующее событие `transitionend` сработает два раза -- по одному для каждого свойства. Поэтому, если не предпринять дополнительных шагов, сообщение из обработчика может быть выведено 2 раза.

94
5-animation/2-css-transitions/1-animate-logo-css/solution.view/index.html
View file

@ -2,38 +2,15 @@
<html>
<head>
<meta charset="utf-8">
<style>img { display: block; cursor: pointer; }</style>
<style>img { cursor: pointer; }</style>
<style>
/**
* до анимации: .flyjet
* в начале анимации .flyjet .growing-init
* в процессе анимации .flyjet .growing-init .growing
* в конце анимации .flyjet
*/
.flyjet {
width: 400px;
height: 240px;
#flyjet {
width: 40px;
height: 24px;
transition: all 3s;
}
.growing-init {
position: absolute;
height: 0;
width: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
/* все свойства анимируются 3 секунды */
-webkit-transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
-ms-transition: all 3s;
}
.growing {
#flyjet.growing {
width: 400px;
height: 240px;
}
@ -41,62 +18,21 @@
</head>
<body>
Кликните картинку для анимации. Расположение элементов при анимации не должно меняться!
<table>
<tr>
<td>Догнать</td>
<td><img onclick="growIn(this)" src="https://js.cx/clipart/flyjet.jpg" class="flyjet">
</td>
<td>..и перегнать!</td>
</tr>
</table>
<b>В процессе анимации повторные клики на изображение игнорировать.</b>
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<script>
function growIn(img) {
if (img.classList.contains('growing-init')) return;
console.log("growIn!");
flyjet.onclick = function() {
var height = img.offsetHeight;
var width = img.offsetWidth;
var ended = false;
// переместить изображение в placeholder постоянного размера
var placeholder = document.createElement('div');
placeholder.style.position = 'relative';
placeholder.style.width = width + 'px';
placeholder.style.height = height + 'px';
img.parentNode.replaceChild(placeholder, img);
placeholder.appendChild(img);
img.classList.add('growing-init');
// откладываем на следующий фрейм, чтобы началась анимация
// иначе изменение свойств IMG не будет замечено
requestAnimationFrame(function() {
// Firefox иногда не стартует анимацию,
// если не отложить classList.add ещё на один кадр (tested: FF30-)
requestAnimationFrame(function() {
img.classList.add('growing');
img.addEventListener('transitionend', done);
});
flyjet.addEventListener('transitionend', function() {
if (!ended) {
ended = true;
alert('Готово!');
}
});
function done(e) {
// сработать только первый раз
img.removeEventListener('transitionend', done);
placeholder.parentNode.replaceChild(img, placeholder);
img.classList.remove('growing');
img.classList.remove('growing-init');
alert('ok');
}
flyjet.classList.add('growing');
}
</script>

92
5-animation/2-css-transitions/1-animate-logo-css/source.view/animate.js
View file

@ -1,92 +0,0 @@
/**
Docs: http://learn.javascript.ru/tutorial/lib
*/
function animate(opts) {
var start = new Date;
var delta = opts.delta || linear;
var timer = setInterval(function() {
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1;
opts.step( delta(progress) );
if (progress == 1) {
clearInterval(timer);
opts.complete && opts.complete();
}
}, opts.delay || 13);
return timer;
}
/**
Анимация стиля opts.prop у элемента opts.elem
от opts.from до opts.to продолжительностью opts.duration
в конце opts.complete
Например: animateProp({ elem: ..., prop: 'height', start:0, end: 100, duration: 1000 })
*/
function animateProp(opts) {
var start = opts.start, end = opts.end, prop = opts.prop;
opts.step = function(delta) {
var value = Math.round(start + (end - start)*delta);
opts.elem.style[prop] = value + 'px';
}
return animate(opts);
}
// ------------------ Delta ------------------
function elastic(progress) {
return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress);
}
function linear(progress) {
return progress;
}
function quad(progress) {
return Math.pow(progress, 2);
}
function quint(progress) {
return Math.pow(progress, 5);
}
function circ(progress) {
return 1 - Math.sin(Math.acos(progress));
}
function back(progress) {
return Math.pow(progress, 2) * ((1.5 + 1) * progress - 1.5);
}
function bounce(progress) {
for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
}
}
}
function makeEaseInOut(delta) {
return function(progress) {
if (progress < .5)
return delta(2*progress) / 2;
else
return (2 - delta(2*(1-progress))) / 2;
}
}
function makeEaseOut(delta) {
return function(progress) {
return 1 - delta(1 - progress);
}
}

31
5-animation/2-css-transitions/1-animate-logo-css/source.view/index.html
View file

@ -2,30 +2,19 @@
<html>
<head>
<meta charset="utf-8">
<script src="animate.js"></script>
<style>img { display: block; cursor: pointer; }</style>
<style>img { cursor: pointer; }</style>
<style>
#flyjet {
width: 40px; /* -> 400px */
height: 24px; /* -> 240px */
}
</style>
</head>
<body>
Кликните картинку для анимации. Расположение элементов при анимации не должно меняться!
<table>
<tr>
<td>Догнать</td>
<td><img onclick="growIn(this)" src="https://js.cx/clipart/flyjet.jpg" width="400" height="240">
</td>
<td>..и перегнать!</td>
</tr>
</table>
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<b>В процессе анимации повторные нажатия на изображение игнорируются.</b>
<script>
function growIn(img) {
/* ваш код */
}
</script>
</body>
</html>
</html>

12
5-animation/2-css-transitions/1-animate-logo-css/task.md
View file

@ -1,12 +1,16 @@
# Анимировать лого (CSS)
# Анимировать самолёт (CSS)
[importance 5]
Реализуйте анимацию, как в демке ниже (клик на картинку):
[iframe src="solution" height=350]
Продолжительность анимации: 3 секунды.
[iframe src="solution" height=300]
Для анимации использовать CSS, по окончании вывести "ок".
<ul>
<li>Изображение растёт при клике с 40x24px до 400x240px .</li>
<li>Продолжительность анимации: 3 секунды.</li>
<li>По окончании вывести "Готово!".</li>
<li>Если в процессе анимации были дополнительные клики -- они не должны ничего "сломать".</li>
</ul>

31
5-animation/2-css-transitions/2-animate-logo-bezier-css/bezier-up.svg Normal file
View file

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>bezier-up</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier-up" sketch:type="MSArtboardGroup">
<path d="M12.5,60.5 L135.5,60.5" id="Line-3" stroke="#979797" stroke-linecap="square" stroke-dasharray="3,2,3,3" opacity="0.7" sketch:type="MSShapeGroup"></path>
<path d="M24.5,160.5 L49.5,13.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M124.5,60.5 L99.5,9.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M23.6666667,160.666667 C48.6666667,10.6666667 98.6666667,10.6666667 123.666667,60.6666667" id="bezier-path" stroke="#CB1E00" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="161" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="60" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="49" cy="11" r="4"></circle>
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="99" cy="11" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="182">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="33" y="16">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="106" y="16">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="127" y="52">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

7
5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.md Normal file
View file

@ -0,0 +1,7 @@
Для такой анимации необходимо подобрать правильную кривую Безье.
Чтобы она выпрыгивала вверх, обе опорные точки можно вынести по `y>1`, например: `cubic-bezier(0.25, 1.5, 0.75, 1.5)` (промежуточные опорные точки имеют `y=1.5`).
Её график:
<img src="bezier-up.svg">

32
5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.view/index.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>img { display: block; cursor: pointer; }</style>
<style>
#flyjet {
width: 40px;
height: 24px;
transition: all 3s cubic-bezier(0.25, 1.5, 0.75, 1.5);
}
#flyjet.growing {
width: 400px;
height: 240px;
}
</style>
</head>
<body>
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<script>
flyjet.onclick = function() {
flyjet.classList.add('growing');
}
</script>
</body>
</html>

10
5-animation/2-css-transitions/2-animate-logo-bezier-css/task.md Normal file
View file

@ -0,0 +1,10 @@
# Анимировать самолёт с перелётом (CSS)
[importance 5]
Модифицируйте решение предыдущей задачи [](/task/animate-logo-css), чтобы в процессе анимации изображение выросло больше своего стандартного размера 400x240px ("выпрыгнуло"), а затем вернулось к нему.
Должно получиться как здесь (клик на картинку)
[iframe src="solution" height=350]
В качестве исходного документа возьмите решение предыдущей задачи.

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

@ -1,120 +1,213 @@
# CSS-transitions
# CSS-анимации
Все современные браузеры, кроме IE9- поддерживают <a href="http://www.w3.org/TR/css3-transitions/">CSS transitions</a>, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.
Все современные браузеры, кроме IE9- поддерживают <a href="http://www.w3.org/TR/css3-transitions/">CSS transitions</a> и <a href="http://www.w3.org/TR/css3-animations/">CSS animations</a>, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.
Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.
[cut]
## Анимация свойства [#css-transition]
## CSS transitions [#css-transition]
Идея проста. Вы указываете, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию.
Идея проста. Мы указываем, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию.
Например, CSS, представленный ниже, 2 секунды анимирует свойство `background-color`.
Например, CSS, представленный ниже, 3 секунды анимирует свойство `background-color`.
```css
.animated {
transition-property: background-color;
transition-duration: 2s;
transition-duration: 3s;
}
```
Теперь любое изменение фонового цвета будет анимироваться в течение 2-х секунд.
Теперь любое изменение фонового цвета будет анимироваться в течение 3х секунд.
У свойства `"transition"` есть и короткая запись:
```css
.animated {
transition: background-color 2s;
}
```
## Полный синтаксис
Свойства для CSS-анимаций:
<dl>
<dt>`transition-property`</dt>
<dd>Список свойств, которые будут анимироваться. Анимировать можно не все свойства, но [многие](http://www.w3.org/TR/css3-transitions/#animatable-properties-). Значение `all` означает "анимировать все свойства".</dd>
<dt>`transition-duration`</dt>
<dd>Продолжительность анимации. Если указано одно значение -- оно применится ко всем свойствам, можно указать несколько значений для разных `transition-property`.</dd>
<dt>`transition-timing-function`</dt>
<dd>Кривая Безье по 4-м точкам, используемая в качестве временной функциии. Их мы изучим [чуть позже](/bezier)</dd>
<dt>`transition-delay`</dt>
<dd>Указывает задержку от изменения свойства до начала CSS-анимации.</dd>
</dl>
Свойство **`transition`** может содержать их все, в порядке: `property duration timing-function delay, ...`.
## Пример
Анимируем одновременно цвет и размер шрифта:
При клике на эту кнопку происходит анимация её фона:
```html
<!--+ run -->
<!--+ run autorun height=60 -->
<button id="color">Кликни меня</button>
<style>
.growing {
transition: font-size 3s, color 2s;
#color {
transition-property: background-color;
transition-duration: 3s;
}
</style>
<button class="growing" onclick="this.style.fontSize='36px';this.style.color='red'">Кликни меня</button>
<script>
color.onclick = function() {
this.style.backgroundColor = 'red';
}
</script>
```
## Временнáя функция
Есть всего 5 свойств, задающих анимацию:
<ul>
<li>`transition-property`</li>
<li>`transition-duration`</li>
<li>`transition-timing-function`</li>
<li>`transition-delay`</li>
</ul>
В качестве временной функции можно выбрать любую [кривую Безье](/bezier), удовлетворяющую условиям:
Далее мы изучим их все, пока лишь заметим, что общее свойство `transition` может перечислять их все, в порядке: `property duration timing-function delay`, а также задавать анимацию нескольких свойств сразу.
Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:
```html
<!--+ run height=80 autorun -->
<button id="growing">Кликни меня</button>
<style>
#growing {
*!*
transition: font-size 3s, color 2s;
*/!*
}
</style>
<script>
growing.onclick = function() {
this.style.fontSize='36px';
this.style.color='red';
}
</script>
```
Далее мы рассмотрим свойства анимации по отдельности.
## transition-property
Список свойств, которые будут анимироваться, например: `left`, `margin-left`, `height`, `color`.
Анимировать можно не все свойства, но [многие](http://www.w3.org/TR/css3-transitions/#animatable-properties-). Значение `all` означает "анимировать все свойства".
## transition-duration
Продолжительность анимации, задаётся в формате [CSS time](http://www.w3.org/TR/css3-values/#time), то есть в секундах `s` или `ms`.
## transition-delay
Задержка до анимации. Например, если `transition-delay: 1s`, то анимация начнётся через 1 секунду после смены свойства.
Возможны отрицательные значения, при этом анимация начнётся с середины.
Например, вот анимация цифр от `0` до `9`:
[codetabs src="digits"]
Она осуществляется сменой `margin-left` у элемента с цифрами, примерно так:
```css
#stripe.animate {
margin-left: -174px;
transition-property: margin-left;
transition-duration: 9s;
}
```
В примере выше JavaScript просто добавляет элементу класс -- и анимация стартует:
```js
digit.classList.add('animate');
```
Можно стартовать её "с середины", с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного `transition-delay`.
В примере ниже при клике на цифру она начнёт двигаться с текущей секунды:
[codetabs src="digits-negative-delay"]
В JavaScript это делается дополнительной строкой:
```js
stripe.onclick = function() {
var sec = new Date().getSeconds() % 10;
*!*
// например, значение -3s начнёт анимацию с 3й секунды
stripe.style.transitionDelay = '-' + sec + 's';
*/!*
stripe.classList.add('animate');
};
```
## transition-timing-function
Временнáя функция, которая задаёт, как процесс анимации будет распределён во времени, например начнётся ли анимация медленно, чтобы потом ускориться или наоборот.
Самое сложное, но при небольшом изучении -- вполне очевидное свойство.
У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого.
### Кривая Безье
В качестве временной функции можно выбрать любую [кривую Безье](/bezier) с 4 опорными точками, удовлетворяющую условиям:
<ol>
<li>Начальная точка `(0,0)`.</li>
<li>Конечная точка `(1,1)`.</li>
<li>Для промежуточных точек значения `x` должны быть в интервале `0..1`.</li>
<li>Для промежуточных точек значения `x` должны быть в интервале `0..1`, `y` -- любыми.</li>
</ol>
Синтаксис для задания кривой Безье в CSS: `cubic-bezier(x2, y2, x3, y3)`. В нём указываются координаты второй и третьей точек, так как первая и последняя фиксированы.
Синтаксис для задания кривой Безье в CSS: `cubic-bezier(x2, y2, x3, y3)`. В нём указываются координаты только двух точек: второй и третьей, так как первая и последняя фиксированы.
Например, торможение можно описать кривой Безье: `cubic-bezier(0.0, 0.5, 0.5 ,1.0)`.
Она указывает, как быстро развивается процесс анимации во времени.
<ul>i>
<li>По оси `x` идёт время: `0` -- начальный момент, `1` -- конец времени `transition-duration`.</li>
<li>По оси `y` -- завершённость процесса: `0` -- начальное значение анимируемого свойства, `1` -- конечное.
Самый простой вариант -- это когда процесс развивается равномерно, "линейно" по времени. Это можно задать кривой Безье `cubic-bezier(0, 0, 1, 1)`.
График этой "кривой" таков:
<img src="bezier-linear.svg">
...Как видно, это просто прямая. По мере того, как проходит время `x`, завершённость анимации `y` равномерно приближается от `0` к `1`.
Поезд в примере ниже с постоянной скоростью "едет" слева направо, используя такую временную функцию:
[codetabs src="train-linear"]
CSS для анимации:
```css
.train {
left: 0;
transition: left 5s cubic-bezier(0, 0, 1, 1);
/* JavaScript ставит значение left: 450px */
}
```
Как нам показать, что поезд тормозит?
Для этого используем кривую Безье: `cubic-bezier(0.0, 0.5, 0.5 ,1.0)`.
График этой кривой:
<img src="train-curve.png">
<img src="train-curve.svg">
Как видно, процесс вначале развивается быстро -- кривая резко идёт вверх, а затем всё медленнее, медленнее.
Вы можете увидеть эту временную функцию в действии, кликнув на поезд:
```html
<style>
[codetabs src="train"]
CSS для анимации:
```css
.train {
position: relative;
left: 0;
-moz-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
-webkit-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
-ms-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
-o-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
transition: left 5s cubic-bezier(0, .5, .5, 1);
/* JavaScript ставит значение left: 450px */
}
</style>
<img class="train" width="177" height="160" src="/files/tutorial/browser/animation/train.gif" onclick="this.style.left='450px'">
```
<style>
.train {
position: relative;
cursor: pointer;
left: 0;
-moz-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
-webkit-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
-ms-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
-o-transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
}
</style>
<img class="train" width="177" height="160" src="/files/tutorial/browser/animation/train.gif" onclick="this.style.left='450px'">
Существует несколько стандартных обозначений кривых: `linear`, `ease`, `ease-in`, `ease-out` и `ease-in-out`.
Значение `linear` -- это прямая, мы её уже видели.
Существуют и несколько стандартных кривых: `linear`, `ease`, `ease-in`, `ease-out` и `ease-in-out`.
Значение `linear` -- это прямая, равномерное изменение. Оно используется по умолчанию.
Остальные кривые являются короткой записью следующих `cubic-bezier`. В таблице ниже показано соответствие:
Остальные кривые являются короткой записью следующих `cubic-bezier`:
<table>
<tr>
<th>`ease`</th>
<th>`ease`<sup>*</sup></th>
<th>`ease-in`</th>
<th>`ease-out`</th>
<th>`ease-in-out`</th>
@ -126,71 +219,147 @@
<td>`(0.42, 0, 0.58, 1.0)`</td>
</tr>
<tr>
<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>
<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>
</tr>
</table>
Наиболее близкий стандартный вариант для примера с поездом -- `ease-out`:
* - По умолчанию, если никакой временной функции не указано, -- используется `ease`.
Значени
**Кривая Безье может заставить анимацию "выпрыгивать" за пределы диапазона.**
Допустимо указывать для кривой Безье как отрицательные `y`, так и сколь угодно большие. При этом кривая Безье будет также по `y` выскакивать за пределы диапазона `0..1`, представляющего собой начало-конец значения.
В примере ниже CSS-код анимации таков:
```css
.train {
-moz-transition: left 5s ease-out;
...
left: 100px;
transition: left 5s cubic-bezier(.5, -1, .5, 2);
/* JavaScript поменяет left на 400px */
}
```
## CSS-преобразования
Свойство `left` должно меняться от `100px` до `400px`.
Браузеры, которые поддерживают CSS-анимацию, поддерживают и [CSS-преобразования](https://developer.mozilla.org/en/CSS/Using_CSS_transforms).
Однако, если кликнуть на поезд, то мы увидим, что:
<ul>
<li>Он едет сначала назад, то есть `left` становится меньше `100px`.</li>
<li>Затем вперёд, причём выезжает за назначенные `400px`.</li>
<li>А затем опять назад -- до `400px`.</li>
</ul>
С их помощью можно сделать много красивых эффектов. Например, вращение:
[codetabs src="train-over"]
```js
//+ run
document.body.style.MozTransition = "all 5s";
document.body.style.MozTransform = "rotate(360deg)";
document.body.style.WebkitTransition = "all 5s";
document.body.style.WebkitTransform = "rotate(360deg)";
document.body.style.OTransition = "all 5s";
document.body.style.OTransform = "rotate(360deg)";
document.body.style.MsTransition = "all 5s";
document.body.style.MsTransform = "rotate(360deg)";
Почему так происходит -- отлично видно, если взглянуть на кривую Безье с указанными опорными точками:
document.body.style.Transition = "all 5s";
document.body.style.Transform = "rotate(360deg)";
<img src="bezier-train-over.svg">
Мы вынесли координату `y` для второй опорной точки на 1 ниже нуля, а для третьей опорной точки -- на 1 выше единицы, поэтому и кривая вышла за границы "обычного" квадрата. Её значения по `y` вышли из стандартного диапазона `0..1`.
Как мы помним, значению `y = 0` соответствует "нулевое" положение анимации, а `y = 1` -- конечное. Получается, что значения `y<0` двинули поезд назад, меньше исходного `left`, а значения `y>1` -- больше итогового `left`.
Это, конечно, "мягкий" вариант. Если поставить значения `y` порядка `-99`, `99`, то поезд будет куда более сильно выпрыгивать за диапазон.
Итак, кривая Безье позволяет задавать "плавное"" течение анимации. Подобрать кривую Безье вручную можно на сайте [](http://cubic-bezier.com/).
### Шаги steps
Временная функция `steps(количество шагов[, start/end])` позволяет разбить анимацию на чёткое количество шагов.
Проще всего это увидеть на примере. Выше мы видели плавную анимацию цифр от `0` до `9` при помощи смены `margin-left` у элемента, содержащего `0123456789`.
Чтобы цифры сдвигались не плавно, а шли чётко и раздельно, одна за другой -- мы разобьём анимацию на 9 шагов:
```css
#stripe.animate {
margin-left: -174px;
transition: margin-left 9s *!*steps(9, start)*/!*;
}
```
Самое замечательное -- все эти эффекты используют графический ускоритель и почти не нагружают процессор.
В действии `step(9, start)`:
Все браузеры, кроме IE9- поддерживают это, ну а в IE может быть что-то через JavaScript или вообще без анимации.
[codetabs src="step"]
Первый аргумент `steps` -- количество шагов, то есть изменение `margin-left` разделить на 9 частей, получается примерно по `19px`. На то же количество частей делится и временной интервал, то есть по `1s`.
`start` -- означает, что при начале анимации нужно сразу применить первое изменение. Это проявляется тем, что при нажатии на цифру она меняется на `1` (первое изменение `margin-left`) мгновенно, а затем в начале каждой следующей секунды.
То есть, процесс развивается так:
<ul>
<li>`0s` -- `-19px` (первое изменение в начале 1й секунды, сразу при нажатии)</li>
<li>`1s` -- `-38px`</li>
<li>...</li>
<li>`8s` -- `-174px`</li>
<li>(на протяжении последней секунды видно окончательное значение).</li>
</ul>
Альтернативное значение `end` означало бы, что изменения нужно применять не в начале, а в конце каждой секунды, то есть так:
<ul>
<li>`0s` -- `0`</li>
<li>`1s` -- `-19px` (первое изменение в конце 1й секунды)</li>
<li>`2s` -- `-38px`</li>
<li>...</li>
<li>`9s` -- `-174px`</li>
</ul>
В действии `step(9, end)`:
[codetabs src="step-end"]
Также есть сокращённые значения:
<ul>
<li>`step-start` -- то же, что `steps(1, start)`, то есть завершить анимацию в 1 шаг сразу.</li>
<li>`step-end` -- то же, что `steps(1, end)`, то есть завершить анимацию в 1 шаг по истечении `transition-duration`.</li>
</ul>
Такие значения востребованы редко, так как это даже и не анимация почти, но тоже бывают полезны.
## Событие transitionend
На конец CSS-анимации можно повесить обработчик. Его стандартное имя: `transitionend`, но браузерные префиксы требуются и тут.
На конец CSS-анимации можно повесить обработчик на событие `transitionend`.
Кликните на лодочку:
Это широко используется, чтобы после анимации сделать какое-то действие или объединить несколько анимаций в одну.
Например, лодочка в примере ниже при клике начинает плавать туда-обратно, с каждым разом уплывая всё дальше вправо:
[iframe src="boat" height=300 edit link]
Её анимация осуществляется функцией `go`, которая перезапускается по окончании (с переворотом через CSS).
Её анимация осуществляется функцией `go`, которая перезапускается по окончании, с переворотом через CSS:
```js
...
boat.onclick = function() {
//...
var times = 1;
function go() {
if (times % 2) {
// плывём вправо
boat.classList.remove('back');
boat.style.marginLeft = 100 * times + 200 + 'px';
} else {
// плывём влево
boat.classList.add('back');
boat.style.marginLeft = 100 * times - 200 + 'px';
}
}
go();
elem.addEventListener('transitionend', go); /* на будущее */
elem.addEventListener('webkitTransitionEnd', go);
elem.addEventListener('mozTransitionEnd', go);
elem.addEventListener('oTransitionEnd', go);
elem.addEventListener('msTransitionEnd', go);
...
boat.addEventListener('transitionend', function() {
times++;
go();
});
};
```
Объект события `transitionend` также содержит свойства:
Объект события `transitionend` содержит специфические свойства:
<dl>
<dt>`propertyName`</dt>
<dd>Свойство, анимация которого завершилась.</dd>
@ -200,17 +369,69 @@ document.body.style.Transform = "rotate(360deg)";
Свойство `propertyName` может быть полезно при одновременной анимации нескольких свойств. Каждое свойство даст своё событие, и можно решить, что с ним делать дальше.
## Ограничения и достоинства CSS-анимаций
## CSS animations
Более сложные анимации делаются объединением простых при помощи CSS-правила `@keyframes`.
В нём задаётся "имя" анимации и правила: что, откуда и куда анимировать. Затем при помощи свойства `animation: имя параметры` эта анимация подключается к элементу, задаётся время анимации и дополнительные параметры, как её применять.
Например:
```html
<!--+ run height=60 -->
<div class="progress"></div>
<style>
/* Chrome, Opera, Safari */
@-webkit-keyframes MY-ANIMATION-NAME {
from { left:0px; }
to { left:300px; }
}
/* Other browsers, except IE9- */
@keyframes MY-ANIMATION-NAME {
from { left:0px; }
to { left:300px; }
}
.progress {
position: relative;
animation: MY-ANIMATION-NAME 3s infinite alternate;
-webkit-animation: MY-ANIMATION-NAME 3s infinite alternate;
border: 2px solid green;
width: 50px;
height: 20px;
background: lime;
}
</style>
```
Этот стандарт пока в черновике, поэтому в Chrome, Safari, Opera нужен префикс `-webkit`.
Статей про CSS animations достаточно много, посмотрите, например:
<ul>
<li>[](http://css.yoksel.ru/css-animation/).</li>
</ul>
## Итого
CSS-анимации позволяют плавно или не очень менять одно или несколько свойств.
Альтернатива им -- плавное изменение значений свойств через JavaScript, мы рассмотрим подробности далее.
Ограничения и достоинства CSS-анимаций по сравнению с JavaScript:
[compare]
-Основное ограничение -- это то, что временная функция может быть задана только кривой Безье. Более сложные анимации, состоящие из нескольких кривых, реализуются при помощи [CSS animations](http://dev.w3.org/csswg/css3-animations/#animation-name-property) (стандарт пока не готов).
-CSS-анимации касаются только свойств, а в JavaScript можно делать всё, что угодно.
-Временная функция может быть задана кривой Безье или через шаги. Более сложные анимации, состоящие из нескольких кривых, реализуются их комбинацией при помощи [CSS animations](http://www.w3.org/TR/css3-animations/), но JavaScript-функции всегда гибче.
-CSS-анимации касаются только свойств, а в JavaScript можно делать всё, что угодно, удалять элементы, создавать новые.
-Отсутствует поддержка в IE9-
+Простые вещи делаются просто. Особенно удобно, если от отсутствия эффекта в IE проблем не возникнет.
+Гораздо "легче" для процессора, чем анимации JavaScript. Лучше используется графический ускоритель. Это очень важно для мобильных устройств.
+Простые вещи делаются просто.
+"Легче" для процессора, чем анимации JavaScript, лучше используется графический ускоритель. Это очень важно для мобильных устройств.
[/compare]
[head]
<link type="text/css" rel="stylesheet" href="/files/tutorial/browser/animation/animate.css" />
<script src="/files/tutorial/browser/animation/step.js"></script>
[/head]
Подавляющее большинство анимаций делается через CSS.
При этом JavaScript запускает их начало -- как правило, добавлением класса, в котором задано новое свойство, и может отследить окончание через событие `transitionend`.

20
5-animation/2-css-transitions/bezier-linear.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier2.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier2.svg" sketch:type="MSArtboardGroup">
<path d="M24.1700721,143.347957 L124.314002,43.5051082" id="Path-6" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="44" r="4"></circle>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="120.100962" y="65">2</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

45
5-animation/2-css-transitions/bezier-train-over.svg Normal file
View file

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="225px" height="331px" viewBox="0 0 225 331" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier-train-over.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier-train-over.svg" sketch:type="MSArtboardGroup">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(0.000000, 76.000000)">
<rect id="Rectangle-233" stroke="#979797" stroke-dasharray="3,2,3,2" sketch:type="MSShapeGroup" x="34" y="13" width="150" height="150"></rect>
<text id="(1,1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="189" y="9">(1,1)</tspan>
</text>
<text id="(0,0)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="0" y="155">(0,0)</tspan>
</text>
<text id="(0,1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="0" y="9">(0,1)</tspan>
</text>
<text id="(1,0)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="189" y="155">(1,0)</tspan>
</text>
</g>
<path d="M34.5,239.5 L107.5,312.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M34,239 C109,314 109,14 184,89" id="bezier-path" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="34" cy="239" r="4"></circle>
<text id="-2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="30" y="261">1</tspan>
</text>
<circle id="Oval-6" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="109" cy="314" r="4"></circle>
<text id="-3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="92" y="320">2</tspan>
</text>
<path d="M110.5,15.5 L183.5,88.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="184" cy="89" r="4"></circle>
<text id="-5" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="188" y="107">4</tspan>
</text>
<circle id="Oval-7" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="109" cy="14" r="4"></circle>
<text id="-4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="92" y="21">3</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

52
5-animation/2-css-transitions/boat.view/index.html
View file

@ -2,56 +2,36 @@
<html>
<head>
<meta charset="utf-8">
<style>
.bouncing-boat {
margin-left: 0;
cursor: pointer;
-webkit-transition: margin-left 3s ease-in-out;
-moz-transition: margin-left 3s ease-in-out;
-o-transition: margin-left 3s ease-in-out;
-ms-transition: margin-left 3s ease-in-out;
}
/* переворот картинки через CSS */
.flip-horizontal {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-ms-transform: scaleX(-1);
filter: fliph; /* IE9- */
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="https://js.cx/clipart/boat.png" class="bouncing-boat" onclick="bounceBoat(this)">
<img src="https://js.cx/clipart/boat.png" id="boat">
<script>
function bounceBoat(elem) {
boat.onclick = function() {
elem.onclick = null; // следующий клик не испортит анимацию
this.onclick = null; // только первый клик сработает
var times = 1;
function go() {
var marginLeft = parseInt(elem.style.marginLeft) || 0;
if (marginLeft == 0) {
elem.className = 'bouncing-boat';
} else {
elem.className = 'bouncing-boat flip-horizontal';
if (times % 2) {
boat.classList.remove('back');
boat.style.marginLeft = 100 * times + 200 + 'px';
} else {
boat.classList.add('back');
boat.style.marginLeft = 100 * times - 200 + 'px';
}
elem.style.marginLeft = (marginLeft ? 0 : 400) + 'px';
}
go();
elem.addEventListener('transitionend', go); /* на будущее */
elem.addEventListener('webkitTransitionEnd', go);
elem.addEventListener('mozTransitionEnd', go);
elem.addEventListener('oTransitionEnd', go);
elem.addEventListener('msTransitionEnd', go);
boat.addEventListener('transitionend', function() {
times++;
go();
});
}
</script>

13
5-animation/2-css-transitions/boat.view/style.css Normal file
View file

@ -0,0 +1,13 @@
#boat {
margin-left: 0;
cursor: pointer;
transition: margin-left 3s ease-in-out;
}
/* переворот картинки через CSS */
.back {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: fliph; /* IE9- */
}

13
5-animation/2-css-transitions/digits-negative-delay.view/index.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="digit"><span id="stripe">0123456789</span></div>
<script src="script.js"></script>
</body>
</html>

5
5-animation/2-css-transitions/digits-negative-delay.view/script.js Normal file
View file

@ -0,0 +1,5 @@
stripe.onclick = function() {
var sec = new Date().getSeconds() % 10;
stripe.style.transitionDelay = '-' + sec + 's';
stripe.classList.add('animate');
};

13
5-animation/2-css-transitions/digits-negative-delay.view/style.css Normal file
View file

@ -0,0 +1,13 @@
#digit {
width: .5em;
overflow: hidden;
font: 32px "Courier New", monospace;
}
#stripe.animate {
margin-left: -174px;
transition-property: margin-left;
transition-duration: 9s;
transition-timing-function: linear;
}

13
5-animation/2-css-transitions/digits.view/index.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="digit"><span id="stripe">0123456789</span></div>
<script src="script.js"></script>
</body>
</html>

3
5-animation/2-css-transitions/digits.view/script.js Normal file
View file

@ -0,0 +1,3 @@
stripe.onclick = function() {
stripe.classList.add('animate');
};

13
5-animation/2-css-transitions/digits.view/style.css Normal file
View file

@ -0,0 +1,13 @@
#digit {
width: .5em;
overflow: hidden;
font: 32px "Courier New", monospace;
}
#stripe.animate {
margin-left: -174px;
transition-property: margin-left;
transition-duration: 9s;
transition-timing-function: linear;
}

BIN
5-animation/2-css-transitions/ease-in-out.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.4 KiB

30
5-animation/2-css-transitions/ease-in-out.svg Normal file
View file

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>ease-in-out.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ease-in-out.svg" sketch:type="MSArtboardGroup">
<path d="M23.6882043,143.904835 C66.0081124,143.904815 81.7292657,43.4905742 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M24.5,143.5 L66.7965736,143.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M83.5,43.5 L125.796574,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="82" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="66" cy="143" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="62" y="165">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="78" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="121" y="35">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
5-animation/2-css-transitions/ease-in.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

28
5-animation/2-css-transitions/ease-in.svg Normal file
View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>ease-in</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ease-in" sketch:type="MSArtboardGroup">
<path d="M23.6882043,143.904835 C66.0081124,143.904815 124.154864,43.4905689 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M24.5,143.5 L66.7965736,143.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="66" cy="143" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="62" y="165">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="114" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="127" y="35">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
5-animation/2-css-transitions/ease-out.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

28
5-animation/2-css-transitions/ease-out.svg Normal file
View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>ease-out</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ease-out" sketch:type="MSArtboardGroup">
<path d="M23.6882043,143.904835 C23.6882043,143.904835 81.8846154,43.4905689 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M83.5,43.5 L123.799999,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="82" cy="43" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="13" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="27" y="165">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="79" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="120" y="35">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
5-animation/2-css-transitions/ease.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

30
5-animation/2-css-transitions/ease.svg Normal file
View file

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>ease</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ease" sketch:type="MSArtboardGroup">
<path d="M23.6882043,143.904835 C48.7884621,134.014426 48.7884621,43.4905636 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M24.5,143.5 L48.5,134.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M50.5,43.5 L123.800003,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="49" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="49" cy="134" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="45" y="156">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="45" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="121" y="35">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

19
5-animation/2-css-transitions/step-end.view/index.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="digit"><span id="stripe">0123456789</span></div>
<script>
digit.onclick = function() {
stripe.classList.add('animate');
}
</script>
</body>
</html>

13
5-animation/2-css-transitions/step-end.view/style.css Normal file
View file

@ -0,0 +1,13 @@
#digit {
width: .5em;
overflow: hidden;
font: 32px "Courier New", monospace;
}
#stripe.animate {
margin-left: -174px;
transition-property: margin-left;
transition-duration: 9s;
transition-timing-function: steps(9, end);
}

19
5-animation/2-css-transitions/step.view/index.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="digit"><span id="stripe">0123456789</span></div>
<script>
digit.onclick = function() {
stripe.classList.add('animate');
}
</script>
</body>
</html>

13
5-animation/2-css-transitions/step.view/style.css Normal file
View file

@ -0,0 +1,13 @@
#digit {
width: .5em;
overflow: hidden;
font: 32px "Courier New", monospace;
}
#stripe.animate {
margin-left: -174px;
transition-property: margin-left;
transition-duration: 9s;
transition-timing-function: steps(9, start);
}

BIN
5-animation/2-css-transitions/train-curve.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

30
5-animation/2-css-transitions/train-curve.svg Normal file
View file

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>train-curve.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="train-curve.svg" sketch:type="MSArtboardGroup">
<path d="M26.1366543,142.907525 C26.1365899,93.4999868 76.5010648,43.244154 126.495114,43.2441555" id="Path-13" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M25.5,143.5 L25.5,93.3402552" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="26" cy="144" r="4"></circle>
<text id="-2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="22" y="165">1</tspan>
</text>
<circle id="Oval-6" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="26" cy="94" r="4"></circle>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="22" y="87">2</tspan>
</text>
<path d="M75.5,43.5 L126.135956,43.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="126" cy="44" r="4"></circle>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="122" y="36">4</tspan>
</text>
<circle id="Oval-7" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="76" cy="44" r="4"></circle>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="72" y="36">3</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

12
5-animation/2-css-transitions/train-linear.view/index.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">
</body>
</html>

9
5-animation/2-css-transitions/train-linear.view/style.css Normal file
View file

@ -0,0 +1,9 @@
.train {
position: relative;
cursor: pointer;
width: 177px;
height: 160px;
left: 0;
transition: left 5s cubic-bezier(0, 0, 1, 1);
}

12
5-animation/2-css-transitions/train-over.view/index.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='400px'">
</body>
</html>

9
5-animation/2-css-transitions/train-over.view/style.css Normal file
View file

@ -0,0 +1,9 @@
.train {
position: relative;
cursor: pointer;
width: 177px;
height: 160px;
left: 100px;
transition: left 5s cubic-bezier(.5, -1, .5, 2);
}

12
5-animation/2-css-transitions/train.view/index.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">
</body>
</html>

9
5-animation/2-css-transitions/train.view/style.css Normal file
View file

@ -0,0 +1,9 @@
.train {
position: relative;
cursor: pointer;
width: 177px;
height: 160px;
left: 0px;
transition: left 5s cubic-bezier(0.0,0.5,0.5,1.0);
}