From e4ffd9466bd5dcc2055ad236753a7de8251afe12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C2=A1ke?= <77801554+front42@users.noreply.github.com>
Date: Sat, 7 Mar 2026 11:26:31 +0300
Subject: [PATCH 1/4] feat: edit css-animations article.md ru
---
7-animation/2-css-animations/article.md | 24 ++++++++++++------------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md
index c49a42e704..b87b9176f3 100644
--- a/7-animation/2-css-animations/article.md
+++ b/7-animation/2-css-animations/article.md
@@ -11,7 +11,7 @@ JavaScript может быть использован для управлени
Всё что нам нужно, чтобы начать анимацию - это изменить свойство, а дальше браузер сделает плавный переход сам.
-Например, CSS-код ниже анимирует трёх-секундное изменение`background-color`:
+Например, CSS-код ниже анимирует трёхсекундное изменение`background-color`:
```css
.animated {
@@ -50,7 +50,7 @@ JavaScript может быть использован для управлени
Далее мы рассмотрим их все, а сейчас ещё заметим, что есть также общее свойство `transition`, которое позволяет задать их одновременно в последовательности: `property duration timing-function delay`, а также анимировать несколько свойств одновременно.
-Например, у этой кнопки анимируются два свойства `color` и `font-size` одновременно:
+Например, у этой кнопки одновременно анимируются два свойства -- `color` и `font-size`:
```html run height=80 autorun no-beautify
@@ -109,9 +109,9 @@ growing.onclick = function() {
stripe.classList.add('animate');
```
-Можно начать анимацию "с середины", с определённого числа, например, используя отрицательное значение `transition-delay`, соответствующие необходимому числу.
+Можно начать анимацию "с середины", с определённого числа, например, используя отрицательное значение `transition-delay`, соответствующее необходимому числу.
-Если вы нажмёте на цифру ниже, то анимация начнётся с последней секунды:
+Если вы нажмёте на цифру ниже, то анимация начнётся с текущей секунды:
[codetabs src="digits-negative-delay"]
@@ -121,7 +121,7 @@ JavaScript делает это с помощью нескольких строк
stripe.onclick = function() {
let sec = new Date().getSeconds() % 10;
*!*
- // например, значение -3s здесь начнут анимацию с третьей секунды
+ // например, значение -3s здесь начнёт анимацию с третьей секунды
stripe.style.transitionDelay = '-' + sec + 's';
*/!*
stripe.classList.add('animate');
@@ -175,7 +175,7 @@ stripe.onclick = function() {
...А как показать замедляющийся поезд?
-Мы можем использовать другую кривую Безье: `cubic-bezier(0.0, 0.5, 0.5 ,1.0)`.
+Мы можем использовать другую кривую Безье: `cubic-bezier(0.0, 0.5, 0.5, 1.0)`.
Её график:
@@ -192,7 +192,7 @@ CSS:
```css
.train {
left: 0;
- transition: left 5s cubic-bezier(0, .5, .5, 1);
+ transition: left 5s cubic-bezier(0, 0.5, 0.5, 1);
/* JavaScript устанавливает свойство left равным 450px */
}
```
@@ -216,7 +216,7 @@ CSS:
.train {
left: 0;
transition: left 5s ease-out;
- /* transition: left 5s cubic-bezier(0, .5, .5, 1); */
+ /* transition: left 5s cubic-bezier(0, 0.5, 0.5, 1); */
}
```
@@ -231,7 +231,7 @@ CSS:
```css
.train {
left: 100px;
- transition: left 5s cubic-bezier(.5, -1, .5, 2);
+ transition: left 5s cubic-bezier(.5, -1, 0.5, 2);
/* JavaScript sets left to 400px */
}
```
@@ -347,11 +347,11 @@ Div-элемент `#digit` имеет фиксированную ширину
Оно широко используется для выполнения действий после завершения анимации, а также для создания последовательности анимаций.
-Например, корабль в приведённом ниже примере начинает плавать туда и обратно по клику, каждый раз все дальше и дальше вправо:
+Например, корабль в приведённом ниже примере начинает плавать туда и обратно по клику, каждый раз всё дальше и дальше вправо:
[iframe src="boat" height=300 edit link]
-Анимация начинается с помощью функции `go`, которая вызывается каждый раз снова, когда переход заканчивается и меняется направление:
+Анимация начинается с помощью функции `go`, которая вызывается заново каждый раз, когда переход заканчивается и меняется направление:
```js
boat.onclick = function() {
@@ -428,7 +428,7 @@ boat.onclick = function() {
Существует множество статей про `@keyframes`, а также [детальная спецификация](https://drafts.csswg.org/css-animations/).
-Скорее всего, вам нечасто понадобится `@keyframes`, разве что на вашем сайте все постоянно в движении.
+Скорее всего, вам нечасто понадобится `@keyframes`, разве что на вашем сайте всё постоянно в движении.
## Итого
From f5e986f618afe5abdc43b4de470cbed083ea3b79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C2=A1ke?= <77801554+front42@users.noreply.github.com>
Date: Sat, 7 Mar 2026 11:43:10 +0300
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20set=20fractional=20values=20?=
=?UTF-8?q?=E2=80=8B=E2=80=8Bin=20uniform=20style=20in=20css-animations=20?=
=?UTF-8?q?article.md=20ru?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
7-animation/2-css-animations/article.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md
index b87b9176f3..3bb34a153a 100644
--- a/7-animation/2-css-animations/article.md
+++ b/7-animation/2-css-animations/article.md
@@ -231,7 +231,7 @@ CSS:
```css
.train {
left: 100px;
- transition: left 5s cubic-bezier(.5, -1, 0.5, 2);
+ transition: left 5s cubic-bezier(0.5, -1, 0.5, 2);
/* JavaScript sets left to 400px */
}
```
From 30c52b6fb130e1d267d3722f3b64b34d1ea7490d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C2=A1ke?= <77801554+front42@users.noreply.github.com>
Date: Sat, 7 Mar 2026 12:12:55 +0300
Subject: [PATCH 3/4] feat: edit source.view in animate-circle task ru
---
.../3-animate-circle/source.view/index.html | 7 +------
1 file changed, 1 insertion(+), 6 deletions(-)
diff --git a/7-animation/2-css-animations/3-animate-circle/source.view/index.html b/7-animation/2-css-animations/3-animate-circle/source.view/index.html
index e305f4cf61..cb4db93a54 100644
--- a/7-animation/2-css-animations/3-animate-circle/source.view/index.html
+++ b/7-animation/2-css-animations/3-animate-circle/source.view/index.html
@@ -11,18 +11,13 @@
transform: translateX(-50%) translateY(-50%);
background-color: red;
border-radius: 50%;
-
- width: 200px;
- height: 200px;
- top: 150px;
- left: 150px;
}
-
+