Css 3 timing functions и с чем их едят

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Property Values

Value Description
ease Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
linear Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
ease-in Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
ease-out Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
ease-in-out Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))
step-start Equivalent to steps(1, start)
step-end Equivalent to steps(1, end)
steps(int,start|end) Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value «start» or «end», and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value «end»
cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Tip: Try the different values in the examples below to understand how it works!

Как работает свойство transition?

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


<div class="transbox"></div>

Эффект перехода поддерживается не во всех браузерах.

Interne Explorer: не поддерживает.

Firefox: -moz-transition.

Safari и Chrome: -webkit-transition.

Opera: -o-transition.

По-этому CSS3 код будет следующий.

.transbox {
    width: 50px;
    height: 50px;
    border:1px solid #333;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
}

Но для того чтобы эффект перехода заработал, нам необходимо добавить стили поведения нашего блока при наведении (:hover) или фокусировки (:focus).

Именно для блока с псевдо-классом :hover (:focus) надо описать свойства которые примет наш блок (элемент) после окончания эффекта перехода.

Добавим же эти стили:

.transbox:hover{
    width: 500px;
    height:50px;
    background: #69c;
    box-shadow: 0 0 10px #333;
}

В завершение статьи о эффектах перехода в CSS3 🙂

Еще пару примеров

<div class="transbox2">
	<div class="c-1">c-1</div>
	<div class="c-2">c-2</div>
</div>
.transbox2 div {
    width: 70px;
    height: 50px;
    margin-top: 20px;
    border:1px solid #333;
    border-radius: 10px;
}
.transbox2:hover .c-1{
    width: 500px;
    background: #69c;
}
.transbox2:hover .c-2{
    width: 200px;
    background: #000;
    color:#f00;
    padding:5px 50px 5px 200px;
}
.c-1 {
	-webkit-transition: background 3s ease-out, width 2s ease 3s;
	-moz-transition: background 3s ease-out, width 2s ease 3s;
	-o-transition: background 3s ease-out, width 2s ease 3s;
	-ms-transition: background 3s ease-out, width 2s ease 3s;
	transition: background 3s ease-out, width 2s ease 3s;
}
.c-2 {
	-webkit-transition: width 2s ease-out, 
						background 1s ease 2s,
						color 1s ease-in 3s,
						padding 2s ease-out 4s;
	-moz-transition: width 2s ease-out, 
						background 1s ease 2s,
						color 1s ease-in 3s,
						padding 2s ease-out 4s;
	-o-transition: width 2s ease-out, 
						background 1s ease 2s,
						color 1s ease-in 3s,
						padding 2s ease-out 4s;
	-ms-transition: width 2s ease-out, 
						background 1s ease 2s,
						color 1s ease-in 3s,
						padding 2s ease-out 4s;
	transition: width 2s ease-out, 
						background 1s ease 2s,
						color 1s ease-in 3s,
						padding 2s ease-out 4s;
}

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

More Examples

Example

To better understand the different function values: Here are five different div elements with five different values:

#div1 {transition-timing-function: linear;} #div2 {transition-timing-function: ease;} #div3 {transition-timing-function: ease-in;} #div4 {transition-timing-function: ease-out;} #div5 {transition-timing-function: ease-in-out;}

Example

Same as the example above, but the speed curves are specified with the cubic-bezier function:


#div1 {transition-timing-function: cubic-bezier(0,0,1,1);} #div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

Transition-timing-function

Данное свойство позволяет задать интенсивность выполнения эффекта перехода. Задать временную функцию можно двумя способами: написав название функции или настроить свою временную функцию.

transition-timing-function: <временная функция> *

<временная функция> = ease | linear | ease-in | ease-out | ease-in-out

или

<временная функия> = cubic-bezier(<числоr>, <число>, <число>, <число>)

Пример использования transition-timing-function:

transition-timing-function: ease;
transition-timing-function: ease, linear;
transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8);

В примере ниже покажем поведение всех временных функций

ease linear ease-in ease-in-out ease-out

Значения свойства

Значение Описание
none Преобразование не применяется.
matrix(n,n,n,n,n,n) Применяет 2D преобразование с помощью матрицы из шести значений.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Применяет 3D преобразование с помощью матрицы из шестнадцати(4х4) значений.
translate(x,y) Функция translate позволяет перемещать элементы влево, вправо, вверх или вниз. Эта функция аналогична поведению position: relative; При использовании этой функции, можно сдвигать элементы не влияя на поток документа.
translate3d(x,y,z) Применяет 3D смещение.
translateX(x) Определяет смещение, только по оси Х.
translateY(y) Определяет смещение, только по оси У.
translateZ(z) Определяет 3D смещение, только по оси Z.
scale(x,y) Функция scale(x,y) масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0.5) уменьшит элемент в 2 раза и так далее. Предоставление различных значений будет искажать элемент. Масштабируемый элемент будет увеличиваться от своего центра или уменьшаться к нему, другими словами центр элемента будет всегда находится в одной и той же точке, не зависимо от его размера. Таково поведение элемента по умолчанию, чтобы изменить это можно воспользоваться свойством transform-origin.
scale3d(x,y,z) Применяет 3D преобразование масштаба.
scaleX(x) Определяет преобразование масштаба по оси Х.
scaleY(y) Определяет преобразование масштаба по оси У.
scaleZ(z) Определяет 3D преобразование масштаба по оси Z.
rotate(angle) Функция rotate() поворачивает элемент вокруг точки происхождения по заданному значению угла. Как и в случае с функцией scale(), по умолчанию точка происхождения — это центр элемента.
rotate3d(x,y,z,angle) Определяет 3D поворот.
rotateX(angle) Определяет 3D поворот вдоль оси Х.
rotateY(angle) Определяет 3D поворот вдоль оси У.
rotateZ(angle) Определяет 3D поворот вдоль оси Z.
skew(x, y) Функция skew(x, y) определяет наклон по осям X и Y. Как и следовало ожидать, x определяет наклон оси X,а y определяет наклон оси Y. Если второй параметр опущен, то перекос элемента произойдёт только по оси X.
skewX(angle) Определяет 2D преобразование наклона вдоль оси Х.
skewY(angle) Определяет 2D преобразование наклона вдоль оси У.
perspective(n) Определяет перспективу для преобразования 3D элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

CSS Свойство:

transform: Результат:

Демонстрация работы свойтсва transform. CSS Код: #myDIV { background-color: lightblue; transform: rotate(10deg); } Кликните на любое значение свойства, чтобы увидеть результат

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS transitions

Идея проста. Мы указываем, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию.

Например, CSS, представленный ниже, 3 секунды анимирует свойство .

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

При клике на эту кнопку происходит анимация её фона:

Есть всего 5 свойств, задающих анимацию:

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

Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:

Далее мы рассмотрим свойства анимации по отдельности.

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


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

animation-iteration-count

По умолчанию, анимация запускает свой цикл один раз от начала до конца, а затем останавливается. Чтобы анимация повторялась много раз может быть использовано свойство animation-iteration-count. Значения для него включают целое число или ключевое слово infinite. С помощью целого числа анимация будет повторяться столько раз, сколько указано, в то время как ключевое слово infinite будет повторять анимацию бесконечно и никогда не остановится.

animation-direction

Кроме возможности установить, сколько раз анимация повторяется, вы можете также объявить направление, в котором анимация завершается, с помощью свойства animation-direction. Значения этого свойства включают в себя normal, reverse, alternate и alternate-reverse.

Значение normal воспроизводит анимацию, как и намеревалось, от начала до конца. Значение reverse воспроизводит анимацию точно наоборот, чем это определено в правиле @keyframes, таким образом, начиная со 100% и работая в обратном направлении до 0%.

Значение alternate воспроизведёт анимацию вперёд, а затем назад. В ключевых кадрах это включает выполнение вперёд от 0% до 100%, а затем в обратном направлении от 100% до 0%. Используя свойство animation-iteration-count можно ограничить количество раз, когда анимация работает вперёд и назад. Счёт начинается с 1, когда анимация проходит вперёд от 0% до 100%, а затем добавляется 1, когда анимация проходит в обратном порядке от 100% до 0%. Объединение в общей сложности двух итераций. Значение alternate также инвертирует любые функции времени при воспроизведении в обратном направлении. Если анимация использует значение ease-in идущее от 0% до 100%, то затем использует значение ease-out идущее от 100% до 0%.

И, наконец, значение alternate-reverse сочетает оба значения alternate и reverse, запуская анимацию назад, а затем вперёд. Значение alternate-reverse начинается со 100% и выполняется до 0%, а затем снова обратно до 100%.

animation-play-state

Свойство animation-play-state позволяет анимации воспроизводиться или остановиться на паузу, с помощью ключевых слов running и paused, соответственно. Когда анимация снимается с паузы, она возобновляет работу из текущего состояния, а не начинается снова с самого начала.

В приведённом ниже примере свойство animation-play-state устанавливается на паузу, когда stage активен при щелчке по нему

Обратите внимание на то, как анимация временно приостанавливается, пока вы не отпустите кнопку мыши

animation-fill-mode

Свойство animation-fill-mode определяет, как элемент должен быть стилизован — до, после или до и после запуска анимации. Свойство animation-fill-mode принимает четыре значения ключевых слов, включая none, forwards, backwards и both.

Значение none не будет применять любые стили к элементу до или после того, как анимация запущена.

Значение forwards сохранит стили, объявленные в последнем указанном ключевом кадре. На эти стили, однако, могут повлиять значения свойств animation-direction и animation-iteration-count, меняя, где анимация заканчивается.

Значение backwards будет применять стили первого заданного ключевого кадра, до того, как анимация будет работать. Включает применение этих стилей в течение всего времени, что может быть задано в animation-delay. Значение backwards также может зависеть от значения свойства animation-direction.

Наконец, значение both применит поведение сразу от обоих значений forwards и backwards.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right


scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Transform

Из названия свойства понятно, что он отвечает за трансформацию блоков. Имеет большое количество функций и еще большее количество их сочетаний. Эксперементируя, можно даже придумать 3D эффекты с Transform, но эта статья лишь о 2D. в CSS прописывается как transform: property, где property может содержать одно из нижеперечисленных значений:

translateX(10px) – сдвиг по горизонтали translateY(10px) – сдвиг по вертикали translate(25px, 30%) – сдвиг по диагонали scaleX(2) – масштабирование по горизонтали. При этом 1 равен 100% scaleY(2) – масштабирование по вертикали scale(.5, 2) – масштабирование как по вертикали, так и по горизонтали rotate(10deg) – поворот в заданную сторону (значение в градусах). При этом отрицательные значения отвечают за поворот влево, а положительные – вправо skewX(20deg) – наклон по горизонтали. Значение так же в градусах skewY(20deg) – наклон по вертикали skew(5deg, -20deg) – наклон по вертикали и горизонтали matrix(w, sky, skx, h, mx, my) – задает все вышеописанные свойства в одном, кроме rotate() и skew(). Значения matrix(): w – ширина объекта. 1 равен 100% h – высота объекта. 1 равен 100% sky – наклон по вертикали. 0 – без наклона skx – наклон по горизонтали. 0 – без наклона mx – сдвиг по горизонтали. 0 – без сдвига my – сдвиг по вертикали. 0 – без сдвига

Пример в конце статьи.

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

  • the CSS property you want to add an effect to
  • the duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

The following example shows a 100px * 100px red <div> element. The <div> element has also specified a transition effect for the width property, with a duration of 2 seconds:

Example

div {  width: 100px;  height: 100px;  background: red;  transition: width 2s; }

The transition effect will start when the specified CSS property (width) changes value.

Now, let us specify a new value for the width property when a user mouses over the <div> element:

Example

div:hover {   width: 300px; }

Notice that when the cursor mouses out of the element, it will gradually change back to its original style.


С этим читают