Веб-разработка для новичков. День 6

Василика Климова

CSS3 Анимация

CSS3 Анимация

Василика Климова
Разработчик интерфейсов
Artec 3D

Moscow Coding School

День 6

Собственные шрифты

Правило @font-face

Формат WOFF самый легковесный

      @font-face { 
         src: url(fonts/gentium.woff); 
         font-family: Gentium; 
         font-weight: 400; 
      }
    

Все CSS селекторы

Описание селекторов

Псевдоклассы

Псевдоэлементы

Background Градиенты

linear-gradient(white, lightblue);
radial-gradient(#38bac7, #324a56);
Генератор

Анимация

CSS3 свойство animation

animation: infinite myMove 3s alternate;
animation-name: myMove; //имяАнимации
animation-iteration-count: infinite;
//количество итераций
animation-duration: 3s;
//продолжительность

CSS3 свойство animation

animation-direction: alternate;
//направление
animation-delay: 5s; //задержка
animation-timing-function: ease;
//функция скорости

Правило @keyframes

0% - Оформление элемента в начале анимации
100% - Оформление элемента в конце анимации

       @keyframes имяАнимации {
          0%   { background: red; }
          50%  { background: blue; }
          100% { background: green; } }
    

Оси 2D

CSS3 2D поворот

transform: rotate(15deg)

CSS3 2D смещение

transform: translate(-50%)

CSS3 2D масштабирование

transform: scale(2)

CSS3 transition

Эффект перехода между состояниями элемента

transition: background 1s ease-out 2s

Оси 3D

CSS3 3D повороты

transform: rotateX(angle)
transform: rotateY(angle)
transform: rotateZ(angle)

Василика Климова

likita
vasilika.klimova
lik04ka

Навигация

Список всех уроков

Fork me on Github