css3 html5 animation. Обсуждение на LiveInternet - Российский Сервис Онлайн-Дневников

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:24 (ссылка)

.barrow-wheel {

    animation-name: rotate;

    animation-duration: 2s;

}

 

@keyframes rotate {

    50% {

         transform: rotate(-90deg); 

    }

    100% {

         transform: rotate(360deg); 

    }

}

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:25 (ссылка)

@keyframes: from и to [3/31]

Как уже говорилось в предыдущем задании, начальный и конечный ключевые кадры задаются с помощью слов from и to или значений 0% и 100%.

А промежуточные ключевые кадры задаются с помощью процентов. Вот пример анимации из 4 кадров:

@keyframes coloring {
from { background-color: red; }
33% { background-color: yellow; }
66% { background-color: green; }
to { background-color: blue; }
}
Опробуем from, to и промежуточные кадры в деле!

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:26 (ссылка)

<!DOCTYPE html>

<html>

    <head>

        <title>@keyframes: from и to</title>

        <meta charset="utf-8">

        <base href="/assets/course80/">

        <link rel="stylesheet" href="epoch1.css"> 

    </head>

    <body class="ancient">

        <div class="lift-top">

            <div class="platform">

                <span class="stone-wheel"></span>

            </div>

        </div>

    </body>

</html>

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:29 (ссылка)

.platform {

    animation-name: lift-up;

    animation-duration: 3s;

}

 

@keyframes lift-up {

  from { transform: translateY(0px); }

  50%  {transform: translateY(-250px); }

  100% { transform: translateY(-300px); }

}

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:35 (ссылка)

@keyframes: группировка кадров [4/31]

Ключевые кадры в keyframes можно группировать, для этого нужно перечислить их через запятую. Рассмотрим пример:

@keyframes stretching {
0%, 50% {
width: 100px;
}
100% {
width: 200px;
}
}
В этом примере первые два кадра сгруппированы. Анимируемый элемент сначала изменит свою ширину до 100px и останется в этом состоянии половину времени анимации. А за вторую половину времени он растянется от 100px до 200px.

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:35 (ссылка)

.platform {

    animation-name: lift-up;

    animation-duration: 3s;

}

 

@keyframes lift-up {

    0% {

        transform: translateY(0px);

    }

    50%,80% {

        transform: translateY(-250px);

    }

    100% {

        transform: translateY(-300px); 

    }

}

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:36 (ссылка)

Одному элементу могут быть одновременно назначены несколько анимаций.

Если в этих анимациях меняются разные свойства элемента, то они будут проигрываться одновременно.

В этом и следующем задании попробуем создать множественную анимацию одного объекта. Сначала давайте создадим и назначим первую анимацию.

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:38 (ссылка)

@keyframes rotate {

 

    50% {

 

         transform: rotate(360deg); 

 

    }

}

 

.stone-wheel {

 

    animation-name: rotate;

 

    animation-duration: 3s;

 

}

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:38 (ссылка)

Теперь разберём, как добавить элементу вторую параллельную анимацию.

Допустим, у нас есть две анимации:

@keyframes move {
to { left: 100px; }
}
@keyframes stretch {
to { width: 100px; }
}
Чтобы назначить элементу вторую анимацию, нужно добавить её название и длительность через запятую в свойствах animation-name и animation-duration. Вот так:

.element {
animation-name: move, stretch;
animation-duration: 5s, 5s;
}
В этом примере две анимации запустятся одновременно, элемент будет параллельно двигаться и удлиняться в течение 5-ти секунд.

Множественные анимации задаются так же, как и множественные фоны и тени — с помощью перечисления свойств через запятую.

Добавим к элементу из прошлого шага вторую анимацию.

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:40 (ссылка)

@keyframes rotate {

    50% {

        transform: rotate(360deg);

    }    

}

 

@keyframes move {

    50% {

        bottom: 0px;

    } 

        100% {

        bottom: -50px;

    } 

}

 

 

.stone-wheel {

    animation-name: rotate , move;

    animation-duration: 3s ,6s;

}

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:40 (ссылка)

По мере изучения анимаций CSS мы будем наблюдать за развитием цивилизации. И сейчас нам предстоит первое путешествие в новый мир механизмов и шестерёнок.

Ваша задача — создать нужные кадры анимации и отправить корабль в плавание. Свойства animation-name и animation-duration для объектов уже заданы.

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:43 (ссылка)

.ship {

    animation-name: move-ship;

    animation-duration: 40s;

}

 

.clouds {

    animation-name: move-clouds;

    animation-duration: 40s;

}

 

.sun-small {

    animation-name: move-sun;

    animation-duration: 10s;

}

 

@keyframes move-comet {

    100% {

        transform: translate(400px, 375px);

    }

}

 

@keyframes move-clouds {

    to {

         transform:  translateX(-1000px);

    }

}

 

@keyframes move-sun {

    to {

       transform:  translate(350px, -400px);

    }

}

 

 

@keyframes move-ship {

    to {

       transform: translateX(1000px);

    }

}

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:46 (ссылка)

Количество проигрываний анимации: animation-iteration-count [8/31]

Во всех предыдущих примерах мы создавали анимации, которые проигрывались один раз, а потом элемент возвращался в исходное состояние. Мы можем определять сколько раз будет повторяться анимация. Для этого используется свойство animation-iteration-count.

В качестве значения оно принимает положительные числа и ноль: при нуле анимация не будет выполнена, в остальных случаях она повторится указанное число раз.

Также в качестве значения animation-iteration-count может быть использовано служебное слово infinite. Оно означает, что анимация будет выполняться бесконечно и никогда не завершится.

Попробуем задавать разное число проигрываний анимации.

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:48 (ссылка)

@keyframes rotate {

    0% {

        transform: rotate(0deg); 

    }

    50% {

        transform: rotate(90deg);

    }

    100% {

        transform: rotate(0deg);

    }

}

 

.arrow {

 

    animation-name: rotate;

 

    animation-duration: 2s;

    animation-iteration-count : infinite;

 

}

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:49 (ссылка)

<!DOCTYPE html>

<html>

    <head>

        <title>Количество проигрываний анимации animation-iteration-count</title>

        <meta charset="utf-8">

        <base href="/assets/course80/">

        <link rel="stylesheet" href="epoch2.css"> 

    </head>

    <body class="mechanical">

        <div class="clock">

            <span class="arrow"></span>

        </div>

    </body>

</html>

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:49 (ссылка)

Помимо количества проигрываний анимации, мы можем определить её направление с помощью свойства animation-direction. По умолчанию анимация имеет прямое направление normal.

Но можно назначить и обратный порядок анимации, чтобы проигрывание начиналось с конца и шло к началу (то есть за начальную точку считался кадр to, а за конечную — from). Для этого используется значение reverse свойства animation-direction.

Попробуем сравнить два направления анимации на примере.

В браузере Safari 8 и ниже направление анимации reverse работает некорректно. Задание можно выполнить в другом браузере.

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:51 (ссылка)

@keyframes clockwise {

    to {

        transform: rotate(180deg);

    }

}

 

@keyframes anticlockwise {

    to {

        transform: rotate(-180deg); 

    }

}

 

.gear-big{

     animation-name: clockwise;

 

 

 

    animation-duration: 2s;

 

    animation-iteration-count : infinite;

 

    animation-direction : reverse;

    }

 

    .gear-small{

     animation-name: anticlockwise;

 

 

 

    animation-duration: 2s;

 

 animation-direction : reverse;

 

    animation-iteration-count : infinite;

    }

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:52 (ссылка)

У свойства animation-direction есть ещё два значения. Они используются, когда количество проигрываний анимации animation-iteration-count больше одного. И оба они определяют чередующееся направление анимации.

Если задано значение alternate, то нечётные проигрывания будут выполняться в прямом направлении, а чётные — в обратном.

.element {
animation-name: move;
animation-duration: 1s;
animation-iteration-count: 2;
animation-direction: alternate;
}
В примере анимация move выполнится два раза: в первый (нечётный) раз направление будет прямым, а во второй (чётный) — обратным.

Если задано значение alternate-reverse, то нечётные проигрывания наоборот будут выполняться в обратном направлении, а чётные — в прямом.

Рассмотрим это на наглядном примере.

В браузере Safari 8 и ниже направление анимации alternate-reverse работает некорректно. Задание можно выполнить в другом браузере.

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:54 (ссылка)

@keyframes clockwise {

    to {

        transform: rotate(180deg);

    }

}

 

@keyframes anticlockwise {

    to {

        transform: rotate(-180deg); 

    }

}

 

.gear-big { 

    animation-name: clockwise;

    animation-duration: 2s;

    animation-iteration-count: 2;

    animation-direction: alternate-reverse;

}

 

.gear-small { 

    animation-name: anticlockwise;

    animation-duration: 2s;

    animation-iteration-count: 2;

     animation-direction: alternate-reverse;

}

 

.element {

    animation-name: move;

    animation-duration: 1s;

    animation-iteration-count: 2;

    animation-direction: alternate-reverse;

}

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:54 (ссылка)

Обеим шестерёнкам задайте количество проигрываний анимации 2,
Цель 2затем чередующееся направление анимации,
Цель 3а потом смените направление анимации на обратное чередующееся.

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:54 (ссылка)

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

В этом и двух следующих заданиях мы создадим две анимации, которые в итоге будут выполняться последовательно с помощью задержки. Сначала давайте создадим и назначим первую анимацию.

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:55 (ссылка)

Создайте анимацию rotate, содержащую кадр to с трансформацией поворота на 360deg,
Цель 2затем добавьте эту анимацию стрелке .arrow-small с длительностью 1s .

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:56 (ссылка)

@keyframes rotate {

 

    to {

 

        transform: rotate(360deg); 

 

    }

 

}

 

.arrow-small { 

 

    animation-name: rotate;

 

    animation-duration: 1s;

 

}

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:57 (ссылка)

Создайте анимацию ding, содержащую ключевые кадры:
33% с трансформацией translateX(-15px);
66% с трансформацией translateX(15px).
Цель 2Затем добавьте эту анимацию колокольчику .bell с длительностью 1s.

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:57 (ссылка)

@keyframes rotate {

    to {

        transform: rotate(360deg);

    }

}

 

.arrow-small {

    animation-name: rotate;

    animation-duration: 1s;

}

 

@keyframes ding {

    33% {

        transform: translateX(-15px);

    }

        66% {

        transform: translateX(15px);

    }

}

 

.bell {

    animation-name: ding;

    animation-duration: 1s;

}

Ответить С цитатой В цитатник

ATUM обратиться по имени Вторник, 14 Апреля 2015 г. 13:58 (ссылка)

Синтаксис свойства animation-delay, с помощью которого и назначается задержка начала, идентичен синтаксису свойства animation-duration.

Например, при задании значения animation-delay: 10s анимация начнётся не сразу, а только через десять секунд.

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

Ответить С цитатой В цитатник

LiveInternetLiveInternet

-неизвестно

-Поиск по дневнику

-Подписка по e-mail

-Постоянные читатели

-Статистика

css3 html5 animation