WEB start

Компьютеры. Интернет. Заочное профессиональное обучение. 055-966-10-17

hit 
counter

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения 055-966-10-17
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

Наши преимущества

  • Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


Регистрация на сайте

CSS анимация

CSS - анимация

Свойство animation  (для браузеров Chrome, Safari, Opera нужно использовать другое свойство: -webkit-animation)  в CSS можно использовать для анимации многих  свойств CSS, таких как цвет, фон, цвет, высота или ширина. Каждая анимация должна быть определена с помощью директивы @keyframes (для браузеров Chrome, Safari, Opera нужно использовать другую директиву: @-webkit-keyframes ), которая затем вызывается со свойством анимации.

Набор свойств, которые могут быть анимированы

background

background-color

background-position

background-size

border

border-bottom

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-width

border-color

border-left

border-left-color

border-left-width

border-right

border-right-color

border-right-width

border-spacing

border-top

border-top-color

border-top-left-radius

border-top-right-radius

border-top-width

bottom

box-shadow

clip

color

column-count

column-gap

column-rule

column-rule-color

column-rule-width

column-width

columns

filter

flex

flex-basis

flex-grow

flex-shrink

font

font-size

font-size-adjust

font-stretch

font-weight

height

left

letter-spacing

line-height

margin

margin-bottom

margin-left

margin-right

margin-top

max-height

max-width

min-height

min-width

opacity

order

outline

outline-color

outline-offset

outline-width

padding

padding-bottom

padding-left

padding-right

padding-top

perspective

perspective-origin

right

text-decoration-color

text-indent

text-shadow

top

transform

transform-origin

vertical-align

visibility

width

word-spacing

z-index

 

 



Свойство  CSS - animation позволяет анимировать переходы от одной конфигурации стиля CSS в другую. 

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

Существуют три ключевых преимущества использования CSS - анимации перед традиционными методами анимации, управляемыми скриптами:

  1. Они просты в использовании для простых анимаций; Вы можете создавать их, даже не зная JavaScript.
  2. Анимация работает хорошо, даже при умеренной загрузке системы. Простые анимации часто могут плохо работать в JavaScript (если только они не особенно качественно сделаны). Механизм рендеринга может использовать пропуски кадров и другие методы, чтобы поддерживать оптимальную производительность.
  3. Предоставление браузеру управления последовательностью анимации позволяет ему оптимизировать производительность и эффективность, например, уменьшая частоту обновления анимаций, запущенных на вкладках, которые в настоящее время не отображаются.

Настройка анимации

Чтобы создать CSS - анимацию, необходимо оформить элемент, который нужно анимировать, с помощью свойства анимации. Это позволяет настроить время, продолжительность и другие детали того, как последовательность анимации должна выполняться. Но это не настраивает реальный внешний вид анимации, что выполняется с помощью правила @keyframes.




Cвойства animation


animation-delay

animation-delay: 3s;
animation-delay: 2s, 4ms;

Настраивает задержку между загрузкой элемента и началом последовательности анимации.

animation-direction

/*  Единственная анимация  */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* Множественные анимации */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Глобальные значения  */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;

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

animation-duration

animation-duration: 6s;
animation-duration: 120ms;
animation-duration: 1s, 15s;
animation-duration: 10s, 30s, 230ms;

Настраивает продолжительность времени, которое анимация должна выполнить для завершения одного цикла.

animation-iteration-count

animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;

animation-iteration-count: 2, 0, infinite;

Настраивает количество повторений анимации; Вы можете указать бесконечное повторение анимации на неопределенный срок.

animation-name

 

Задаёт имя директивы @keyframes .

animation-play-state

/*  Одна анимация  */
animation-play-state: running;
animation-play-state: paused;

/* Множественные анимации */
animation-play-state: paused, running, running;

/* Глобальные значения */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: unset;

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

animation-timing-function

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;

Настраивает время анимации; То есть как анимация переходит через ключевые кадры, устанавливая кривые ускорения.

animation-fill-mode

forwards, backwards, both, none

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Several values may be given, separated by commas. */
/* Each applies for each animation in animation-name. */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Настраивает, какие значения применяются анимацией до и после ее выполнения.


Пример:

<HTML> <HEAD> <STYLE> p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } </STYLE> </HEAD> <BODY> <p>Test animation . Test animation . Test animation . Test animation . Test animation . Test animation . Test animation . Test animation . Test animation . Test animation . </p> </HTML>



Видео