CSS va HTML5-da animatsiya bo’yicha mini tutorial

Front End texnologiyalari bilan ishlagan yillarim davomida men animatsiyaning turli usullari bilan ishlashga majbur bo’ldim. Ushbu maqolada men JavaScript-dan foydalanmasdan CSS-da animatsiya qanday ishlashini batafsil ko’rib chiqmoqchiman.

CSS HTML elementining deyarli har qanday xususiyatini jonlantirish imkonini beruvchi animatsiya imkoniyatiga ega. Animatsiya kodi keyframes blokida ko’rsatilgan.

Animatsiya xususiyati fon rangi, balandlik, uzunlik, element pozitsiyasi va boshqalar kabi CSS xususiyatlarini jonlantirish uchun ishlatilishi mumkin.

Keling, elementning fon rangini o’zgartiradigan misolni ko’rib chiqaylik.

Keling, HTMLda «element» klassi bilan element yarataylik:

CSS da esa ushbu element uchun changeColor nomli animatsiya yozamiz, u bizga element rangini qizildan ko’kga o’zgartirish uchun kerak;

@keyframes changeColor {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

Bu yerda 0% — animatsiyaning boshlanishi, 100% — animatsiyaning oxiri. CSS ushbu vaqt orasidagi barcha siz tanlagan xususiyatlarni avtomatik ravishda ishga tushiradi. Bunday holda, bir maromda rang o’zgarishi bo’ladi.

Keling, ushbu animatsiyani ‘element’ uchun CSS stillarida animatsiya xususiyati sifatida qo’shamiz. Bizning CSS quyidagicha bo’ladi:

.element {
  animation: changeColor 2s infinite;
}

Biz qo’shimcha xususiyatlar bilan animatsiyani boshqarishimiz mumkin.

Ushbu misolda animatsiya nomidan keyin biz animatsiya tezligini (2s) va takrorlashlar sonini (bu holda cheksiz takrorlanishlar soni) belgilab oldik.

Bir nechta animatsiya xususiyatlari mavjud. Keling, ularning har birini ko’rib chiqaylik:

— animation-name: keyframes bilan belgilangan animatsiya nomi

— animation-duration: 0% dan 100% gacha bo’lgan bir animatsiya tsikli uchun qancha vaqt ketadi shuni belgilaydi sukund va millisekundlarda qiymat qabul qiladi (1s yoki 1000ms)

— animation-timing-function: animatsiya ijrosini tezligini belgilash uchun zarur

— animation-delay: sahifa yuklangandan so’ng animatsiya qancha vaqt kutib keyin ishga tushishini sekund yoki millisekundlarda belgilash mumkin

— animation-direction: animatsiya yo’nalishini belgilaydi. Odatiy holda, animatsiya 0% dan 100% gacha boradi. Ushbu xususiyatdan foydalanib, siz animatsiyani teskari yo’nalishda 100% dan 0% gacha o’tkazishingiz yoki har safar yo’nalishni o’zgartirishingiz mumkin.

— animation-iteration-count: Animatsiya siklining takrorlanishlar soni. Siz uni raqamlarda ko’rsatishingiz yoki animatsiyani cheksiz takrorlash uchun infinite ni belgilashingiz mumkin.

— animation-fill-mode: Animatsiya tugashidan oldin yoki keyin biriktiriladigan qiymatni o’rnatadi. Misol uchun, barcha animatsiya tsikllari tugagandan so’ng, elementning foni yashil bo’lishini belgilashingiz mumkin.

— animation-play-state: animatsiyani play/pause qilish

Bu xususiyatlarni ko’rsatishingiz uchun namuna :

.element {
  animation-name: changeColor;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

Animatsiyali login formasi

Keling, biroz qiyinroq animatsiya qilib ko’raylik. Masalan, jonlantirilgan login formasi.

Yuborish tugmasi uchun halqali animatsiya yarataylik. Tugma ustiga kursor olib borilganda jonlantirilgan effekt qo’shamiz. Keling, kirish maydonlari focus’da bo’lgan paytda foydalanuvchi nomi va parol yorliqlari uchun bir xil animatsiyani qilaylik.

HTMLni tayyorlab olamiz:

  
Login
  

    

      
      Username
    
    

      
      Password
    
    
      
      
      
      
      Submit
    
  



CSS stillarini ham yozib olamiz;

html {
height: 100%;
}
body {
  margin:0;
  padding:0;
  font-family: sans-serif;
  background: linear-gradient(#141e30, #243b55);
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.login-box .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
  0 0 25px #03e9f4,
  0 0 50px #03e9f4,
  0 0 100px #03e9f4;
}

Ana endi 4 ta blokda keyframes yozib olamiz;

@keyframes btn-anim1 {
0% {
  left: -100%;
}
50%,100% {
  left: 100%;
 }
}

@keyframes btn-anim2 {
0% {
  top: -100%;
}
50%,100% {
  top: 100%;
 }
}

@keyframes btn-anim3 {
0% {
  right: -100%;
}
50%,100% {
  right: 100%;
}
}

@keyframes btn-anim4 {
0% {
  bottom: -100%;
}
50%,100% {
  bottom: 100%;
 }
}

Endi animatsiyalarni bloklarga biriktirib olamiz;

.login-box a span:nth-child(1) {
    animation: btn-anim1 1s linear infinite;
}

.login-box a span:nth-child(2) {
    animation: btn-anim2 1s linear infinite;
    animation-delay: .25s
}

.login-box a span:nth-child(3) {
	animation: btn-anim3 1s linear infinite;
	animation-delay: .5s
}

.login-box a span:nth-child(4) {
	animation: btn-anim4 1s linear infinite;
	animation-delay: .75s
}

Xulosa

Ushbu maqolada biz JavaScript-ni ishlatmasdan CSS va HTML animatsiyalaridan qanday foydalanishni ko’rib chiqdik. CSS tomonidan taqdim etilgan insturmentlar to’plami juda moslashuvchan: siz undan ko’p sonli turli xil animatsiyalarni yaratish uchun foydalanishingiz mumkin, buning uchun faqat sizning tasavvuringiz va sog’lom fikringiz chegara bo’ladi. Internetni titkilab siz o’zingizga ilhom olish uchun turli xil ijodiy CSS animatsiyalarini ko’rishingiz mumkin.

Pavel Terenin — rus tilidan tarjima qilindi.