css animation, html5 api

eleks.com eleks.com

CSS анімації, HTML5 api

Поговоримо про CSS анімації HTML5 api

eleks.com

CSS анімації

CSS transition CSS transition дозволяє зміни властивостей в

стилях Значення змінюються плавно за вказаний час

Transition• Transition-property: вказує назви

властивостей, які потрібно анімувати

• Transition-duration: вказує тривалість анімації

• Transition-delay• Transition-timing-function

Вендорні префікси

eleks.com

Демо

CSS TransformДозволяє елементам бути трансформованими в двовимірному вимірі

Transform-propertyМожемо трасформувати• Форму• Розмір• Позицію

Transform методиМожемо трасформувати• Skew()• Scale()• Rotate()• Translate()

Skew(x-angle, y-angle)Викривлює елементи вздовж осей Х і У

• SkewX()• SkewY()

Scale(width, height)Збільшує чи зменшує розмір елемента

• ScaleX()• ScaleY()

Rotate(angle)Обертає елемант за годинниковою чи проти годинникової стрілки відповідно до заданого кута

Translate(X-axis, Y-axis)Переміщує елемент з його поточної позиції

• TranslateX()• TranslateY()

Transition-timing-function• Linear• Ease• Ease-in• Ease-out• Ease-in-out

eleks.com

HTML5 API

HTML5: Audio

HTML5: Video

HTML5: Local Storage

HTML5: Canvas

HTML5: Offline

HTML5: History

HTML5: Geolocation

eleks.com

Питання

eleks.com

Inspired by Technology.Driven by Value.