HTML + CSS Анимация

HTML+CSS: Анимация

В новой записи мы с вами рассмотрим анимацию на чистом CSS. Мы рассмотрим свойства transform, transision. Данные свойства позволяют создавать анимации вращения, смещения, перемежения на чистом CSS.

transition

transition-property

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

.div {
width: 100px;
transition-property: width;
}
.div:hover {
width: 200px;
}

transition-duration

Задает время за которое должна пройти анимация.

Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то переход будет резкий. Свойство не наследуется.

.div {
width: 100px;
height: 50px;
background: #657432;
margin: auto;
transition-duration: 1s;
}
.div:hover {
width: 200px;
}

transition-timing-function

Свойство transition-timing-function задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.

easeФункция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
linearПереход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,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).
cubic-bezier(x1, y1, x2, y2)Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

В таблице ниже представлены значения которые вы можете использовать в качестве значения для свойства transition-timing-function.

easeInSinecubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSinecubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSinecubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuadcubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuadcubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuadcubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubiccubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubiccubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubiccubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuartcubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuartcubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuartcubic-bezier(0.77, 0, 0.175, 1)
easeInQuintcubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuintcubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuintcubic-bezier(0.86, 0, 0.07, 1)
easeInExpocubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpocubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpocubic-bezier(1, 0, 0, 1)
easeInCirccubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirccubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirccubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBackcubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBackcubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBackcubic-bezier(0.68, -0.55, 0.265, 1.55)

transition-delay

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

.div {
width: 100px;
height: 50px;
background: #657432;
margin: auto;
transition-duration: 1s;
transition-delay: .5s;
}
.div:hover {
width: 200px;
}

transform

Свойство transform используется для создания анимации трансформации. С помощью данного свойства вы можете вращать, растягивать, смещать элементы.

Давайте рассмотрим все значения которые может принимать данное свойство. В качестве примера я буду использовать обычный блок, а анимация будет срабатывать при наведение на него.

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

rotate()

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

transform: rotate(360deg);

translate()

Значение translate смещает элемент по оси X и Y. Значение указывается в px. Первое значение смещает элемент по оси X, второе значение смещает по оси Y.

transform: translateX(100px);

Значения translateX() и translateY() смещают элемент по X и Y координатам.

transform: translateX(100px);
transform: translateY(100px);

scale()

С помощью данного свойства вы можете сжимать или растягивать элемент по вертикали или горизонтали. Аналогично предыдущему значению свойства transform, имеются 3 вида указания значения: scale(), scaleX(), scaleY(). Значение можно указывать в единицах или дробных числах

transform: scale(1.5, 0.5);
transform: scaleX(1.5);
transform: scaleY(1.5);

skew()

С помощью данного свойства вы можете сжимать или растягивать элемент по вертикали или горизонтали. Аналогично предыдущему значению свойства transform, имеются 3 вида указания значения: skew(), skewX(), skewY(). Значение указывается можно указывать в градусах.

transform: skew(20deg, 50deg);
transform: skewX(20deg);
transform: skewY(20deg);

matrix()

Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения.

transform: matrix(20deg);

transform-origin

Данное свойство смещает цент трансформации. Значение указывается в процентах, где center – 50% 50%, или возможно указания значения в качестве ключевых свойств.

transform-origin: top left;

Вы можете использовать несколько трансформация сразу. Для этого нужно их перечислить в порядке их запуска в качестве значения.

transform: rotate(360deg) skewY(20deg);

Указание ключевых кадров анимации

Вы можете указывать ключевые кадры анимации в определенных точках анимации. Это указывается с помощью @keyframes, при этом нужно указать произвольное название анимации и перечислить список правил.

@keyframes имя анимации { список правил }

Имя анимации вы указываете своё, его в дальнейшем мы будет использовать внутри свойства transform.

Правила задаются с указанием ключевых кадров в процентах или с указанием ключевых свойств from и to.

.html_keyframe_shadow {
   width: 50px;
   height: 50px;
   background: #653462;
   margin: auto;
   transition: 1s;
   border: 1px solid #000;
}
.html_keyframe_shadow:hover {
   animation: shadow 2s infinite ease-in-out;
}
@keyframes shadow {
   from, 
   to {
      background: red;
   }
   25% {
      background: green;
   } 
   75% {
      background: black;
   }
   50% {
      background: blue;
   }
}

animation-name – название анимации для элемента

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

animation-name: test_animation;

animation-duration – продолжительность анимации

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

animation-duration: .5s;
animation-duration: 200ms;

animation-iteration-count – количество повторов анимации

Вы можете указать количество повторов анимации, для этого нужно добавить свойство animation-iteration-count

animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.5;

animation-direction – направление анимации

Свойство animation-direction определяет, должна ли анимация воспроизводиться в обратном порядке в некоторых или во всех циклах. Когда анимация воспроизводится в обратном порядке, временные функции также меняются местами. Например, при воспроизведении в обратном порядке функция ease-in будет вести себя как ease-out.

normalВсе повторы анимации воспроизводятся так, как указано. Значение по умолчанию.
reverseВсе повторы анимации воспроизводятся в обратном направлении от того, как они были определены.
alternateКаждый нечетный повтор цикла анимации воспроизводятся в нормальном направлении, каждый четный повтор воспроизводится в обратном направлении.
alternate-reverseКаждый нечетный повтор цикла анимации воспроизводятся в обратном направлении, каждый четный повтор воспроизводится в нормальном направлении.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
animation-direction: initial;
animation-direction: inherit;

animation-play-state – свойство для управления работой функции

С помощь данного свойства вы можете останавливать и запускать функцию указывая определенные значения.

animation-play-state: running; //запускаем
animation-play-state: paused; //останавливаем
animation-play-state: paused, running, running;
animation-play-state: initial;
animation-play-state: inherit;

Вы можете прописать данное свойство для псевдокласса hover и останавливать анимацию после наведения курсора на элемент.

animation-delay – указывает начало работы анимации

Свойство animation-delay определяет, когда анимация начнется. Задается в секундах s или миллисекундах ms.

Указываем несколько видов анимации на один элемент

Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую:

div {
   animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;
}
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

43
Оставить комментарий

avatar
43 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
35 Авторы комментариев
AndrewBogAndrewBogMurrayVumtreantincMurrayVum Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
StepFoush
Гость

Prix Kamagra Marseille [url=http://apcialisle.com/#]canadian cialis[/url] Cialis France Pharmacie Buy Cialis Viagra Para Durar Toda Noche

StepFoush
Гость

Testosterone Patches Online Buy [url=http://apcialisle.com/#]cheapest cialis[/url] Cialis 20 Generico Buy Cialis Amoxicillin Company

JanleF
Гость

Amoxicillin For Cat Bites [url=http://apcialisle.com/#]cialis 5mg[/url] Cialis Effets Indesirables cialis 5 mg Achat De Viagra France

JanleF
Гость

Dental Antibiotic Amoxicillin Protection Period [url=http://apcialisle.com/#]Buy Cialis[/url] Cialis 20mg Tablets Cialis Ordine Kamagra

StepFoush
Гость

Discount Secure Ordering Dutasteride Best Buy In Internet [url=https://apcialisle.com/#]cialis 5mg[/url] Avelox Compared To Keflex Buy Cialis How To Buy Clomid Over The Counter

JanleF
Гость

Medicament Cialis 20mg [url=https://apcialisle.com/#]cialis buy online usa[/url] Cephalexin Lupin 500 Mg cheapest cialis Propecia In Women Side Effects

StepFoush
Гость

Inderal [url=https://apcialisle.com/#]cialis generic[/url] buy now isotretinoin – isotretinoin cash delivery cialis 5 mg Acheter Cialis En Tunisie

JanleF
Гость

Kamagra Dosis [url=https://viacialisns.com/#]Cialis[/url] Indomethacin Online Order No Rx Usa Cialis Comprar Cialis Madrid

Bupbaipt
Гость
Bupbaipt

buy viagra generic online https://canadianpharmacystorm.com buy cialis mexico

Bupbaipt
Гость
Bupbaipt

mail order viagra australia http://tadmedz.com buy brand name levitra

JanleF
Гость

Comprar Viagra Generico Internet [url=https://abcialisnews.com/#]Cialis[/url] Comprar Cialis En Farmacia De Andorra Cialis Medrol Over The Counter Options

Bupbaipt
Гость
Bupbaipt

buy generic cialis online uk buy generic cialis where to buy viagra online uk

Arturojep
Гость
Arturojep

how much does cialis cost at walmart https://viagrawithoutdoctorspres.com can you buy viagra boots

JanleF
Гость

Comprar Cialis Generico Internet [url=https://buycialisuss.com/#]cialis professional[/url] Vendo Viagra Malaga Buy Cialis Propecia Epilobio Calvicie

JimmyGoori
Гость
JimmyGoori

cheapest viagra online generic viagra 100mg viagra sale manchester

RaymondLem
Гость
RaymondLem

buy viagra in dublin generic viagra without the prescription cialis pills amazon

Harryraw
Гость
Harryraw

levitra for sale in canada http://tadal24ph.com – canada price on cialis buy viagra in uk

Harryraw
Гость
Harryraw

cialis forum where to buy http://aralenph.com – chloroquine where to buy cialis in dubai

Harryraw
Гость
Harryraw

cialis online cheap from canada http://zithazi.com – Azithromycin online viagra 100 mg

Harryraw
Гость
Harryraw

viagra sale statistics http://kaletra24.com – Ritonavir cheap viagra and cialis

BradleyAnync
Гость
BradleyAnync
BradleyAnync
Гость
BradleyAnync

cialis tadalafil buy online
buy viagra

BradleyAnync
Гость
BradleyAnync

buy cialis online canada
viagra online

BradleyAnync
Гость
BradleyAnync

cialis pills description
viagra without doctor prescription

BradleyAnync
Гость
BradleyAnync

discount generic levitra
viagra without doctor prescription

BradleyAnync
Гость
BradleyAnync

viagra buy walgreens
sildenafil

BradleyAnync
Гость
BradleyAnync

buy cialis generic india
viagra pills

BradleyAnync
Гость
BradleyAnync
MathewDaups
Гость
MathewDaups

tadalafil vs cialis
http://cialisxtl.com/ generic cialis tadalafil

MathewDaups
Гость
MathewDaups

does viagra or cialis help with pe
http://cialisxtl.com/ cialis professional

AndrewCig
Гость
AndrewCig

hims viagra https://sildenafilprof.com
what cialis pills look like

AndrewCig
Гость
AndrewCig

viagra boner https://sildenafilprof.com
can you buy viagra ebay

Robertorell
Гость
Robertorell
Robertorell
Гость
Robertorell

cialis 20mg price when will cialis go generic

RichardHap
Гость
RichardHap
RichardHap
Гость
RichardHap

how to take viagra for maximum effect: genuine viagra without a doctor prescription buy cialis no prescription canada

abakaro
Гость

Buy Prednisolone Eu [url=https://buyciallisonline.com/]Cialis[/url] Alcohol Stopping Keflex Buy Cialis Kamagra Oral Jelly Gunstig

MurrayVum
Гость
MurrayVum

ed meds online 100mg viagra without a doctor prescription
onlinepharmacyero.com cat antibiotics without pet prescription

MurrayVum
Гость
MurrayVum

buy prescription drugs from canada buy cheap prescription drugs online
onlinepharmacyero.com buy prescription drugs from canada cheap

treantinc
Гость
treantinc

Progesterone Order Now Low Price With Free Shipping [url=https://bbuycialisss.com/]buy liquid cialis online[/url] Levitra Cialis O Viagra cialis generic online Viagra Kaufen Illegal

MurrayVum
Гость
MurrayVum

buy prescription drugs from canada cheap buy prescription drugs from india
onlinepharmacyero.com cheap pet meds without vet prescription

AndrewBog
Гость
AndrewBog

high blood pressure and cialis cialis without doctor prescription

AndrewBog
Гость
AndrewBog

how long does it take cialis to take effect cialis