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; } -
+ diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index c49a42e704..ee446c3e18 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(0.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`, разве что на вашем сайте всё постоянно в движении. ## Итого