HTML Урок 7. Транзакции и размеры

Автор: | 14.09.2015
Нет комментариев

transition

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

<переход> = [ none | <transition-property> ] || <transition-duration> || 
<transition-timing-function> || <transition-delay>

transition:all 0s ease 0s - значение по умолчанию

transition-property

Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.

transition-property: none | all | <свойство> [,<свойство>]*

Значения

none
Никакое свойство не задано.
all
Все свойства будут отслеживаться.
<свойство>
Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.
пример:
-webkit-transition-property: top;

transition-timing-function

Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.

transition-timing-function представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через transition-property значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону

Синтаксис

transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|step-start|step-end|steps|cubic-bezier

Значения

ease
Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1).
ease-in
Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).
ease-out
Анимация начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1).
ease-in-out
Анимация начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1).
linear
Одинаковая скорость от начала и до конца.
step-start
Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
step-end
Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
steps
Ступенчатая функция, имеющая заданное число шагов.

transition-timing-function: steps(<число>, start | end)

 
Здесь: <число> — целое число больше нуля; start — задаёт полунепрерывную снизу функцию;end — задаёт полунепрерывную сверху функцию.
 
cubic-bezier
Задаёт функцию движения в виде кривой Безье.
Полное описание смотрите тут http://htmlbook.ru/css/transition-timing-function

transition-delay

Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s или 0msзапускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property.

Синтаксис

transition-delay: <время> [,<время>]*

transform

Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.

Синтаксис

transform: <функция> [<функция>]* | none

Значения

функция
Функция трансформации.
none
Отменяет действие трансформации.

Функции трансформации

matrix

Задаёт матрицу преобразований.

rotate

Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

transform: rotate(<угол>)

пример

div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

scale

Масштаб элемента по горизонтали и вертикали.

transform: scale(sx[, sy]);

Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.

пример

div {
    -ms-transform: scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3);
}

scaleX

Масштабирует элемент по горизонтали.

transform: scaleX(sx);

scaleY

Масштабирует элемент по вертикали.

transform: scaleY(sy);

skewX

Наклоняет элемент на заданный угол по вертикали.

transform: skewX(<угол>)

пример

div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

skewY

Наклоняет элемент на заданный угол по горизонтали.

transform: skewY(<угол>)

пример

div {
    -ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg);
}

translate

Сдвигает элемент на заданное значение по горизонтали и вертикали.

transform: translate(tx[, ty])

пример

div {
    -ms-transform: translate(50px,100px); /* IE 9 */
   	-webkit-transform: translate(50px,100px); /* Safari */
    transform: translate(50px,100px);
}

translateX

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

transform: translateX(tx)

translateY

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

transform: translateY(ty)

 

CSS Единицы измерения

CSS имеет различные единицы измерения.

Единтца измерения Описание
em Размер относительно размера шрифта. 2em означает что размер задан в два размера шрифта
rem Размер шрифта body
vw Один процент от ширины окна просмотра
vh Один процент от высоты окна просмотра
vmin Один процент от минимальной ширины окна просмотра
vmax Один процент от минимальной высоты окна просмотра
%
px пиксели (1px = 1/96thот 1дюйма)

Замечание:  em и rem очень часто применяются на практике

Транзакции и анимация.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition</title>
  <style>
   #bar {
    top:-5.5em; right:5em; /* Положение */
     padding: .5em; /* Поля */
     margin: 0; /* Отступы */
     position: absolute; /* Абсолютное позиционирование */
     width: 2em; /* Ширина */
     background: #333; /* Цвет фона */
     color: #fff; /* Цвет текста */
     text-align: center; /* Выравнивание по центру */
     /* Переход */
     -webkit-transition: top 1s ease-out 0.5s;
     -moz-transition: top 1s ease-out 0.5s;
     -o-transition: top 1s ease-out 0.5s;
     transition: top 1s ease-out 0.5s;
    }
   #bar:hover { top: 0; }
  </style>
 </head>
 <body>
  <ul id="bar">
   <li>1</li><li>2</li>
   <li>3</li><li>4</li>
   <li>&darr;</li>
  </ul>
 </body>
</html>

В данном примере при наведении курсора на стрелку, раскрывается блок с числами.

Плавная трансформация | CSS свойство transition

Псевдокласс :hover позволяет элементам быть менее статичными, изменяя их свойства при наведении мышки.

<style>

.blok {
  background: #808991;
  color: #FFF;
  cursor: pointer;
}

.blok:hover {
  background: #D0D941;
  color: #000;
}

</style>

<div class="blok">при наведении мышки</div>

Благодаря свойству transition можно сделать плавный переход между состояниями элемента.

плавная смена цвета туда-обратно

<style>
.transition {
transition: 3s;
}
</style>

<div class="blok transition">плавная смена цвета туда-обратно</div>

плавная смена при наведении на div

<style>
.transition2:hover {
transition: 3s;
}
</style>

<div class="blok transition2">плавная смена при наведении на div</div>

плавная смена, когда курсор выведен за пределы div

<style>
.transition3:not(:hover) {  transition: 3s;}
</style> 

<div class="blok transition3">плавная смена, когда курсор выведен за пределы div</div>

сохранение положения :hover

<style>
.transition4 {
transition: 0s 9999999s;
}
.transition4:hover {
transition: 3s;
}
</style>

<div class="blok transition4">сохранение положения :hover</div>
Свойство Описание
transition-property свойство [список возможных], на которое распространяется трансформация. При необходимости воздействия на несколько свойств, они перечисляются через запятую.

  • all — все
  • none — никто

all

width, background

width

none
transition-duration время, в течении которого происходит трансформация.

0s

0.5s

1s

5s
transition-delay время, по истечении которого происходит трансформация.

0s

0.5s

1s

5s
transition-timing-function указывает как должны изменяться промежуточные значения в кривой времени. Например, начинать развиваться медленно, а потом ускоряться. Трансформация может происходить и плавно на протяжении всего участка времени [cubic-bezier], и рывками в заданное количество шагов [steps].

Untitled-11

  • ease, он же cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear, он же cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in, он же cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out, он же cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out, он же cubic-bezier(0.42, 0, 0.58, 1.0)
  • step-start, он же steps(1, start)
  • step-end, он же steps(1, end), он же steps(1)

ease

linear

ease-in

ease-out

ease-in-out

cubic-bezier(.1, .9, .9, 1.5)

cubic-bezier(.1, .9, .9, .1)

cubic-bezier(.1, .9, .9, -1.5)

cubic-bezier(.1, -1.5, .1, 2.5)

step-start

step-end

steps(4, end)

steps(4)

steps(4, start)

плавная смена цвета CSS

<style>

.transition1 {  
transition: background-color 3s cubic-bezier(0.1, 0.8, 0.5, 2), color 3s 1s linear;   /* или */   
transition-property: background-color, color;  transition-duration: 3s;  transition-delay: 0s, 1s;  transition-timing-function: cubic-bezier(0.1, 0.8, 0.5, 2), linear;}

</style> 

<div class="blok transition1">плавная смена цвета CSS</div>

Популярные сочетания transition с другими свойствами, например, opacity или transform.

изменение ширины width

<div class="transition-width">изменение ширины width</div>

изменение прозрачности opacity

<div class="transition-opacity">изменение прозрачности opacity</div>

кручение CSS

<div class="transition-rotate">кручение transform: rotate(360deg);</div>

увеличивавшие объекта CSS

<div class="transition-scale">увеличивавшие объекта в два раза transform: scale(2);</div>

смещение вниз CSS

<div class="transition-translate">смещение вниз position: relative;</div>

Untitled-12

<style>
  div.blok6 {
    cursor: pointer;
    position: relative;
    text-align: center;
  }
  div.blok6:before {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    box-shadow: 0 0 10px #A0A9B1 inset;
    content: attr(data-title);
    font-family: Tahoma;
    font-size: 32px;
    height: 48px;
    line-height: 48px;
    opacity: 0;
    padding: 0 10px;
    position: absolute;
    right: 50px;
    top: 20px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }
  div.blok6:hover:before {
    right: 160px;
    opacity: 1;
    top: 140px;
  }
  div.blok6 img {
    width: 400px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }
  div.blok6:hover img {
    width: 500px;
  }
  div.blok6:after {
    content: attr(data-zagolovok);
    display: block;
    font-weight: bold;
    font-family: Helvetica;
    font-size: 20px;
    text-align: center;
  }
</style>
<div class="blok6" data-title="всплывающий текст" data-zagolovok="подпись под изображением">
<img src="адрес_изображения" /></div>