Анимации, преобразования и переходы

animation

Анимация

elem {
    animation: animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-delay animation-fill-mode
}
div {
    animation: fadeOut 2s ease-in-out 2 alternate 5s forwards, glow 5s;
}

animation-name

Назначает анимацию, созданной с помощью keyframes

elem {
    animation-name: myAnimation;
}

animation-duration

Продолжительность анимации

elem1 {
    animation-duration: 2s;
}

elem2 {
    animation-duration: 1000ms;
}

animation-timing-function

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

  • linear
  • ease
  • easi-in
  • easi-out
  • easi-in-out
elem1 {
    animation-timing-function: ease-in-out;
}

elem2 {
    animation-timing-function: cubic-bezier(.20, .96, .74, .07);
}

animation-delay

Время задержки начала анимации

elem1 {
    animation-delay: 2s;
}

elem2 {
    animation-delay: 1000ms;
}

animation-iteration-count

Количество запусков анимации

elem1 {
    animation-iteration-count: 2;
}

elem2 {
    animation-iteration-count: infinite;
}

animation-direction

Стартовая точка анимации, для последующей анимации

  • normal - по умолчанию
  • alternate
elem {
    animation-direction: alternate;
}

animation-fill-mode

Стилизация элемента вначале и-или в конце

  • backwards
  • forwards
  • both
elem {
    animation-fill-mode: backwards;
}

animation-play-state

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

  • pause
  • running
elem {
    animation-play-state: pause
}

keyframes

Позволяет дать анимации имя, которое потом можно будет применить к любому элементу страницы.

@keyframes myAnimation {
    from {
        background-color: black;
    }
    to {
        background-color: whote;
    }
}

transform

Трансформация элемента: масштабирование, вращение, наклон или пермещение.

  • perspective
  • rotate
  • rotateX
  • rotateY
  • rotate3d
  • scale
  • scaleX
  • scaleY
  • scaleZ
  • scale3d
  • skew
  • skewX
  • skewY
  • translate
  • translateX
  • translateY
  • translateZ
  • translate3d
elem1 {
    transform: rotate(45deg);
}

elem2 {
    transform: scale(1.5);
}

elem3 {
    transform: skew(45deg 0) rotate(200deg) translate(100px, 0) scale(.5);
}

transform-origin

Точка, в которой применяется трансформация.

elem1 {
    transform-origin: left top;
}

elem {
    transform-origin: 0% 100%;
}

elem {
    transform-origin: 10px -100px;
}

transition

Анимирует изменения CSS свойств элемента

elem {
    transition:
        transition-property
        transition-duration
        transition-timing-function
        transition-delay;
}
elem {
    transition: background-color 1.5s ease-in-out 500ms;
}

transition-property

Определяет конкретные css-свойства

elem {
    transition-property: width, left;
}

elem1 {
    transition-property: all;
}

transition-duration

Продолжительность анимации перехода

elem {
    transition-duration: 2s;
}

elem1 {
    transition-duration: 2000ms;
}

transition-timing-function

Скорость анимации перехода

  • linear
  • ease
  • easi-in
  • easi-out
  • easi-in-out
elem1 {
    transition-timing-function: ease-in-out;
}

elem2 {
    transition-timing-function: cubic-bezier(.20, .96, .74, .07);
}

transition-delay

Время задержки перед началом анимации перехода

elem1 {
    transition-delay: 2s;
}

elem2 {
    transition-delay: 1000ms;
}