🗊Презентация Анимация и трансформация

Анимация и трансформация Данильченко Анна Александровна Преподаватель кафедры программного обеспечения систем ЖГТУ

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

Поворот Transform: rotate(45deg);

Единицы измерения угла поворота CSS3-трансформации

Масштабирование scale() Значение масштаба задается относительно единицы: scale(2) - исходный элемент будет увеличен в два раза, scale(0.5) - элемент уменьшается в два раза

Можно задать направление: X - по горизонтали, Y - по вертикали, Z - глубина масштабирования.

scale() можно использовать для создания эффекта отражения. Для этого нужно передать отрицательное значение в функцию scale(). 

Перемещение translate(x,y), translateX(x),translateY(y)

Искажение skew() искажает форму элемента

Использование нескольких трансформаций

кроссбраузерный CSS   -moz-transform - Firefox -o-transform - Opera  -webkit-transform  - Safari  Transform

Перспектива применяется при трансформациях элемента, определяет расстояние в пикселях от плоскости дочерних элементов до точки из которой пользователь как бы смотрит на них. perspective: 1000; perspective: 125px;

opacity Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта. .semi { opacity: 0.5; /* Полупрозрачность элемента */ }

3D-контекст Определяет, как дочерние элементы должны отображаться в 3D-пространстве

Анимация

Анимация

Transition Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function иtransition-delay. Устанавливает эффект перехода между двумя состояниями элемента.

Свойства должны указываться в следующем порядке: transition-property указывает CSS свойства, которые будут задействованы для создания перехода. transition-duration указывает время, в течении которого будет совершен переход. transition-timing-function указывает функцию смягчения отвечающую за плавность выполнения перехода. transition-delay устанавливает величину задержки перед началом выполнения перехода.

 transition-timing-function

Шаги - steps()

Пример http://shpargalkablog.ru/2011/07/transformaciya-css.html

С помощью свойства @keyframes Вы можете создать анимацию. from (оформление элемента в начале анимации) to (оформление элемента в конце анимации) 0% - оформление элемента в начале анимации, 100% - оформление в конце анимации

Свойство animation animation-name: boo; - имя animation-duration: 0.5s; - длительность animation-delay: 0.3s; - задержка animation-timing-function: linear; - плавность изменения - описывает метод расчета промежуточных значений свойств для анимации

Свойство animation animation-iteration-count: 5; - установить количество повторов анимации infinite — анимация проигрывается бесконечное число раз animation-direction: normal | reverse | alternate; -  порядок выполнения анимации (анимация должна выполняться в обратном порядке в четные разы и в нормальном в нечетные)

Свойство animation animation-play-state: running | paused; - запустить или приостановить анимацию #spinner:hover { -webkit-animation-play-state: paused; } animation-fill-mode: forwards | backwards | both; - определяет, будет ли видимым эффект от анимации, когда сама анимация уже закончилась (можно указать несколько через запятую).

Допустимые значения none — эффект от анимации будет наблюдаться лишь в течение времени анимации forwards — эффект от анимации будет виден даже тогда, когда анимация закончилась (после завершения анимации элемент получает не начальные значения, а какие-то промежуточные из анимации) backwards — начальный ключевой кадр анимации будет отображаться в течение всего времени задержки анимации (имеет смысл применять только к анимациям с ненулевой задержкой) both — начальный ключевой кадр анимации будет отображаться в течение всего времени задержки анимации, а последний будет отображаться даже тогда, когда анимация закончилась (имеет смысл применять только к анимациям с ненулевой задержкой

Доп. Свойства css3 Градиент -webkit-linear-gradient -Создаёт линейный градиент в браузерах Safari и Chrome. background-image: -webkit-linear-gradient([<угол> | <позиция> ,] <цвет> [, <цвет>]*);

Пример <div class="grad"> &nbsp;</div> .grad{ background-image: -webkit-linear-gradient(0, pink, blueviolet, blue, green, yellow, orange, red); background-image: -moz-linear-gradient(0, pink, blueviolet, blue, green, yellow, orange, red);}

CSS фильтры Filter - Устанавливает фильтр (визуальный эффект) или их сочетание для элемента. К фильтрам относится изменение прозрачности, добавление тени, трансформация и др.

Машинка Создаем блок для показа анимации Html css

Анимация для фона.

Создать блоки для машинки, колес и дыма

Результат

Позиционируем машинку и добавляем анимацию перемещения по оси х

Позиционируем колеса и дым

Дальше сами…

Задание