Практическое занятие №16

Наименование: Создание анимации с помощью CSS

1. Цель: Научиться создавать правила при оформлении веб – страниц средствами CSS

Наименование: Создание динамического меню навигации при помощи списков и правил CSS

1. Цель: Научиться применять элементы HTML (списки и гиперссылки), а также свойства CSS для формирования системы навигации на веб странице

2. Подготовка к занятию: по предложенной литературе повторить тему «Введение в CSS3» и ответить на следующие вопросы:

2.1 Какие нововведения появились в CSS3?

2.2 Какие браузеры не поддерживают анимации?

3. Литература:

3.1 Шомас Е.А. Конспект лекций по дисциплине «Веб - дизайн», 2014

3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013

3.3 http://uroki-css.ru/ - уроки CSS3

3.4 http://habrahabr.ru/company/nordavind/blog/209462/ - Трюки с CSS - анимациями

4. Перечень оборудования и программного обеспечения:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Браузеры

4.3 Текстовый редактор

5. Задание:

5.1 Создать следующую анимацию: квадрат размерами 100х100 изменяет свой цвет (допустим с зеленого на желтый) в течении 3 секунд;

5.2 Переделать анимацию, чтобы смена цвета происходила по меньшей мере 4 раза;

5.3 Переделать анимацию таким образом, чтобы при каждом изменении цвета квадрат двигался по часовой стрелке;

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

6. Порядок выполнения работы:

6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;

6.2 Выполнить задание практического занятия;

6.3 Дать ответы на контрольные вопросы;

7. Содержание отчета:

7.1 Наименование и цель работы

7.2 Код таблицы CSS

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

8. Контрольные вопросы:

8.1 Что такое анимация?

8.2 С помощью какого правила создается анимация?

8.3 Как отличается запись правила по созданию анимации для браузеров Firefox и Chrome?

8.4 Какими способами можно задать начало и конец анимации?

ПРИЛОЖЕНИЕ:

С CSS3 мы можем создавать анимацию, которая может заменить анимированные изображения, Flash, анимацию и скрипты JavaScript.

Чтобы создавать анимацию в CSS3, вы должны изучить правило @keyframes. Правило @keyframes используется для создания анимации. Укажите CSS стиль внутри правила @keyframes и анимация будет воспроизводиться, плавно изменяя текущий стиль на новый. Слово keyframes можно перевести с английского как "ключевые кадры", что вполне соответствует сути этого правила, в чем вы убедитесь ниже.

Internet Explorer и Opera пока еще не поддерживают правило @keyframes и свойство animation.

Firefox требует приставки - moz -, тогда как Chrome и Safari требуют приставки - webkit -.

Пример:

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari и Chrome */
{
from {background: red;}
to {background: yellow;}
}

Когда анимация создана в правиле @keyframe, привяжите ее к селектору, иначе анимация не произведет эффекта.

Привязка анимации к селектору осуществляется указанием по крайней мере двух следующих свойств CSS3 анимации:

• Указание названия анимации
• Указание продолжительности анимации

Пример:

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari и Chrome */
}

Замечание: Вы должны определить название (имя) и продолжительность анимации. Если продолжительность пропущена, анимация не запустится, так как значение по умолчанию равно 0.

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

Укажите, когда должно произойти изменение в процентах (от общей продолжительности одного цикла), или ключевые слова "from" и "to", которые обозначают 0% и 100% соответственно. 0% - это начало анимации, 100% - это завершение (когда анимация полностью завершена). Для наилучшей поддержки браузерами, всегда следует указывать селекторы 0% и 100%. Следующая таблица перечисляет правило @keyframes и все свойства анимации:

Не нашли, что искали? Воспользуйтесь поиском: