renovations

2-ui/3-event-details/9-keyboard-events/article.md

@@ -35,7 +35,7 @@
 
 Например, при нажатии клавиши [key S] (не важно, каков регистр и раскладка) её скан-код будет равен `"S".charCodeAt(0)`.
 
-Для других другими символов, например, знаками пунктуации, есть  таблица кодов, которую можно взять, например, из статьи Джона Уолтера: <a href="http://unixpapa.com/js/key.html">JavaScript Madness: Keyboard Events</a>, или же можно нажать на нужную клавишу на [тестовом стенде](#keyboard-test-stand) и получить код.
+Для других символов, в частности, знаков пунктуации, есть  таблица кодов, которую можно взять, например, из статьи Джона Уолтера: <a href="http://unixpapa.com/js/key.html">JavaScript Madness: Keyboard Events</a>, или же можно нажать на нужную клавишу на [тестовом стенде](#keyboard-test-stand) и получить код.
 
 Когда-то в этих кодах была масса кросс-браузерных несовместимостей. Сейчас всё проще -- таблицы кодов в различных браузерах почти полностью совпадают. Но некоторые несовместимости, всё же, остались. Вы можете увидеть их в таблице ниже. Слева -- клавиша с символом, а справа -- скан-коды в различных браузерах.
 

5-animation/2-css-transitions/article.md

@@ -376,39 +376,46 @@ boat.onclick = function() {
 
 В нём задаётся "имя" анимации и правила: что, откуда и куда анимировать. Затем при помощи свойства `animation: имя параметры` эта анимация подключается к элементу, задаётся время анимации и дополнительные параметры, как её применять.
 
-Например:
+Пример с пояснениями в комментарии:
 
 ```html
-<!--+ run height=60 -->
+<!--+ run height=60 autorun="no-epub" no-beautify -->
-<div class="progress">
+<div class="progress"></div>
-</div>
 
 <style>
-  /* Chrome, Opera, Safari */
+*!*
-  
+  /* Современные браузеры, кроме Chrome, Opera, Safari */
-  @-webkit-keyframes MY-ANIMATION-NAME {
+  @keyframes go-left-right {   /* назовём анимацию: "go-left-right" */
     from {
-      left: 0px;
+      left: 0px;               /* от: left: 0px */
     }
     to {
-      left: 300px;
+      left: calc(100% - 50px); /* до: left: 100%-50px */
     }
   }
-  /* Other browsers, except IE9- */
+*/!*
 
-  @keyframes MY-ANIMATION-NAME {
+  /* Префикс для Chrome, Opera, Safari */
+  @-webkit-keyframes go-left-right {
     from {
       left: 0px;
     }
     to {
-      left: 300px;
+      left: calc(100% - 50px);
     }
   }
   
   .progress {
+*!*
+    /* применить анимацию go-left-right */
+    /* продолжительность 3s */
+    /* количество раз: бесконечное (infinite) */
+    /* менять направление анимации каждый раз (alternate) */
+    animation: go-left-right 3s infinite alternate;
+    -webkit-animation: go-left-right 3s infinite alternate;
+*/!*
+
     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;
@@ -422,7 +429,8 @@ boat.onclick = function() {
 Статей про CSS animations достаточно много, посмотрите, например:
 
 <ul>
-<li>[](http://css.yoksel.ru/css-animation/).</li>
+<li>[Статья про CSS Animation](http://css.yoksel.ru/css-animation/).</li>
+<li>[Пример бесконечной подпрыгивающей анимации на CSS Animation и кривых Безье](https://albiebrown.github.io/gravify/).</li>
 </ul>
 
 ## Итого