CSS Animation kullanımı örnek proje ile anlatım

css

Merhabalar, monitör yaptığımız işlemde bazı trick olaylardan faydalandık. Bunları sizlerle paylaşmak istiyorum.

css animation

Talep edilen dört kutucuğu birbiri ile ayrı ayrı ilişkilendirmek.

Senaryo:

Peki biz nasıl bir yapı kurduk :)

Öncelikle relative bir kapsayıcıya ihtiyacımız var sonra :root renk ve boşluk değerini tanımlayarak başlıyoruz.

<div class="container bg-gray">
  <div class="interactive-icon">
    <div class="loading-line">
      <div class="line-right-to-top">
        <div class="linear-line"></div>
      </div>
      ...
    </div>
    <div class="rounded-element">
      <div class="col-12 d-flex justify-content-center mb-3">
        <div class="round-box">
          <div class="icon energy"></div>
          <div class="text">0.4 kW</div>
        </div>
      </div>
      <div class="row">
        <div class="col-6 d-flex justify-content-center">
          <div class="round-box">
            icon
          </div>
        </div>
        <div class="col-6 d-flex justify-content-center">
          <div class="round-box">
            icon
          </div>
        </div>
      </div>
      <div class="col-12 d-flex justify-content-center">
        <div class="round-box">
          icon
        </div>
      </div>
    </div>
  </div>
</div>

container içerisinde dört tane elementimizi oluşturduk ve bunları

col-12
col-6col-6

bir yapı kurduk. İstenen element şekilleri altıgen olduğu için css clip path özelliğinden faydalandık. Kullandığımız araç: bennettfeely.com/clippy/

Can I use Search: clip-path

Şimdi ilk senaryo ile elementler arası iletişimi başlatalım.

Yukarıdan => Aşağıya #

İhtiyacımız olan yukarı ve aşağıyı kapsayacak absolute bir element. Bu elementin width ve height değerlerini 0 giriyoruz. Daha sonra animasyon ile bu değerleri değiştirerek yükleniyor görünümü kazandıracağız.

.line-top-to-bottom {
  left: calc(50% + var(--space));
  position: absolute;
  width: 50%;
  height: calc(100% - var(--space));
  .linear-line {
    border-left: 2px solid var(--color-one);
    border-bottom: 2px solid var(--color-one);
    box-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 0px rgba(255, 255, 255, 1),
                0 0 10px rgba(255, 255, 255, 1), 0 0 10px var(--color-one),
                0 0 15px var(--color-one), 0 0 20px var(--color-one),
                0 0 30px var(--color-one);
    width: 0;
    height: 0;
    -webkit-animation: top-to-bottom 1s ease-in 0.5s forwards;
    animation: top-to-bottom 1s ease-in 0.5s forwards;
  }
}

Elementimize absolute değeri vererek özgürleştiriyoruz. Relative kapsayıcısından dışarı çıkamadığı için animasyon işlemlerimiz alanımızda gerçekleşecektir.

Gecikme süreleri kullanarak çizgilerin birbirinden bağımsız yüklemesini ayarladık.

-webkit-animation: top-to-bottom 1s ease-in 0.5s forwards;
animation: top-to-bottom 1s ease-in 0.5s forwards;
DeğerAçıklama
top-to-bottomAnimasyon adı
1sAnimasyon tamamlama süresi
esase-inAnimasyon hız eğrisi
.5sAnimasyon başlangıç gecikme süresi
forwardsAnimasyon doldurma modu
@-webkit-keyframes top-to-bottom {
  0% { height: 0; }
  100% { height: 100%; }
}
@keyframes top-to-bottom {
  0% { height: 0; }
  100% { height: 100%; }
}

Animasyon işlemi: 0% değerinde ise height: 0(px) değerini al => 100% olduğunda (animasyon tamamlandığında) height: 100% ol diyoruz ve başlangıçta gözükmeyen elementin genişlik değeri ile oynayıp yükleniyormuş gibi görünüm elde ediyoruz.

Şimdi bu elementi birden fazla senaryo için çoğaltma işlemi yapacağız. Elementimizi kopyalayarak —

İkinci senaryoyu gerçekleştirelim. Yukarıdan => Aşağıya #
.line-bottom-to-top {
  left: calc(50% + var(--space));
  position: absolute;
  width: 50%;
  height: calc(100% - var(--space));
  transform: scale(1, -1);
  .linear-line {
    border-left: 2px solid #0dcaf0;
    border-bottom: 2px solid #0dcaf0;
    width: 0;
    height: 0;
    -webkit-animation: top-to-bottom 1s ease-in 0.5s forwards;
            animation: top-to-bottom 1s ease-in 0.5s forwards;
  }
}

Burada CSS dönüştürme Özelliği’nden faydalandık.

Bunu başarmak için CSS Dönüştürme Özelliği kullanabilirsiniz. Dikey çevirme, div’i şu şekilde ölçeklendirmeyi içerir:

-webkit-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
     -o-transform: scale(1, -1);
        transform: scale(1, -1);

scss — transform ile element ayna görünüm işlemi

Bu aşamadan sonra yapılması gereken işlemler kutular arası iletişimin gelen isteğe göre JavaScript ile .loading-line elementi içindeki line-right-to-top değerlerini değiştirmek alanı yeniletmek.

Anlatımda yapılan örnek #