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 и все свойства анимации:

Свойство	Описание
@keyframes	Определяет анимацию
animation	Стенографическое (сокращенное) свойство для всех свойств анимации, за исключением свойства animation-play-state
animation-name	Указывает название анимации @keyframes
animation-duration	Указывает, сколько секунд (миллисекунд) требуется для завершения одного полного цикла анимации. По умолчанию 0
animation-timing-function	Описывает, как будет изменяться скорость проигрывания анимации в течение одного цикла. Default "ease"
animation-delay	Указывает, когда начнется анимация (задержка анимации). По умолчанию 0
animation-iteration-count	Указывает, сколько раз будет воспроизводиться анимация. По умолчанию один раз
animation-direction	Указывает, будет или нет анимация проигрываться в обратном направлении (от конца к началу) на четных циклах воспроизведения. По умолчанию равно "normal"
animation-play-state	Указывает, запущена анимация или на паузе. Значение по умолчанию "running"