Самостоятельная работа по веб-программирование Саидов Сарварбек Принял: Хожамуратов Бекмурод

Download 391,32 Kb. bet 8/13 Sana 27.10.2022 Hajmi 391,32 Kb. #856952 Turi Самостоятельная работа

Bog'liq
Анимационные работы в CSS3

animation-direction

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

Чтобы определить, является ли повтор цикла анимации четной или нечетной — количество повторов начинается с 1.


Синтаксис

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;

body {
margin: 0;
text-align: center;
background: url(https://html5book.ru/wp-content/uploads/2015/05/background1.png);
}
.container {
width: 660px;
margin: 50px auto;
}
ul {
padding: 0;
list-style: none;
margin-bottom: 40px;
}
li {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
box-shadow: 1px 1px 2px rgba(0,0,0,.3);
}
li:nth-child(1) {background:#8A6C5E}
li:nth-child(2) {background:#BBDADE}
li:nth-child(3) {background:#F6D5A1}
li:nth-child(4) {background:#FAC0B0}
li:nth-child(5) {background:#FF615B}
.alternate li {
-webkit-animation: shake .7s linear alternate infinite;
animation: shake .7s linear alternate infinite;
}
.alternate-reverse li {
-webkit-animation: shake 0.7s linear alternate-reverse infinite;
animation: shake 0.7s linear alternate-reverse infinite;
}
.normal li {
-webkit-animation: shake 0.7s linear normal infinite;
animation: shake 0.7s linear normal infinite;
}
.reverse li {
-webkit-animation: shake 0.7s linear reverse infinite;
animation: shake 0.7s linear reverse infinite;
}
@-webkit-keyframes shake {
100% {
-webkit-transform: translateX(-30px);
}
}
@keyframes shake {
100% {
transform: translateX(-30px);
}
}

Download 391,32 Kb.

Do'stlaringiz bilan baham: