Skip to content

feat: edit css-animations article.md ru #2131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
front42 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

feat: edit css-animations article.md ru #2131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e4ffd94
feat: edit css-animations article.md ru
front42 Mar 7, 2026
f5e986f
feat: set fractional values ​​in uniform style in css-animations arti…
front42 Mar 7, 2026
30c52b6
feat: edit source.view in animate-circle task ru
front42 Mar 7, 2026
a22fac6
feat: add space in css-animations article.md ru
front42 Mar 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions 7-animation/2-css-animations/3-animate-circle/source.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,13 @@
transform: translateX(-50%) translateY(-50%);
background-color: red;
border-radius: 50%;

width: 200px;
height: 200px;
top: 150px;
left: 150px;
}
</style>
</head>

<body>

<div class="circle"></div>
<button onclick="showCircle(150, 150, 100)">showCircle(150, 150, 100)</button>

</body>
</html>
24 changes: 12 additions & 12 deletions 7-animation/2-css-animations/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ JavaScript может быть использован для управлени

Всё что нам нужно, чтобы начать анимацию - это изменить свойство, а дальше браузер сделает плавный переход сам.

Например, CSS-код ниже анимирует трёх-секундное изменение`background-color`:
Например, CSS-код ниже анимирует трёхсекундное изменение `background-color`:

```css
.animated {
Expand Down Expand Up @@ -50,7 +50,7 @@ JavaScript может быть использован для управлени

Далее мы рассмотрим их все, а сейчас ещё заметим, что есть также общее свойство `transition`, которое позволяет задать их одновременно в последовательности: `property duration timing-function delay`, а также анимировать несколько свойств одновременно.

Например, у этой кнопки анимируются два свойства `color` и `font-size` одновременно:
Например, у этой кнопки одновременно анимируются два свойства -- `color` и `font-size`:

```html run height=80 autorun no-beautify
<button id="growing">Нажми меня</button>
Expand Down Expand Up @@ -109,9 +109,9 @@ growing.onclick = function() {
stripe.classList.add('animate');
```

Можно начать анимацию "с середины", с определённого числа, например, используя отрицательное значение `transition-delay`, соответствующие необходимому числу.
Можно начать анимацию "с середины", с определённого числа, например, используя отрицательное значение `transition-delay`, соответствующее необходимому числу.

Если вы нажмёте на цифру ниже, то анимация начнётся с последней секунды:
Если вы нажмёте на цифру ниже, то анимация начнётся с текущей секунды:

[codetabs src="digits-negative-delay"]

Expand All @@ -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');
Expand Down Expand Up @@ -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)`.

Её график:

Expand All @@ -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 */
}
```
Expand All @@ -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); */
}
```

Expand All @@ -231,7 +231,7 @@ CSS:
```css
.train {
left: 100px;
transition: left 5s cubic-bezier(.5, -1, .5, 2);
transition: left 5s cubic-bezier(0.5, -1, 0.5, 2);
/* JavaScript sets left to 400px */
}
```
Expand Down Expand Up @@ -347,11 +347,11 @@ Div-элемент `#digit` имеет фиксированную ширину

Оно широко используется для выполнения действий после завершения анимации, а также для создания последовательности анимаций.

Например, корабль в приведённом ниже примере начинает плавать туда и обратно по клику, каждый раз все дальше и дальше вправо:
Например, корабль в приведённом ниже примере начинает плавать туда и обратно по клику, каждый раз всё дальше и дальше вправо:

[iframe src="boat" height=300 edit link]

Анимация начинается с помощью функции `go`, которая вызывается каждый раз снова, когда переход заканчивается и меняется направление:
Анимация начинается с помощью функции `go`, которая вызывается заново каждый раз, когда переход заканчивается и меняется направление:

```js
boat.onclick = function() {
Expand Down Expand Up @@ -428,7 +428,7 @@ boat.onclick = function() {

Существует множество статей про `@keyframes`, а также [детальная спецификация](https://drafts.csswg.org/css-animations/).

Скорее всего, вам нечасто понадобится `@keyframes`, разве что на вашем сайте все постоянно в движении.
Скорее всего, вам нечасто понадобится `@keyframes`, разве что на вашем сайте всё постоянно в движении.

## Итого

Expand Down