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

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

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

Senaryo:

• Yukarıdan aşağı, sağa, sola
• Aşağıdan yukarı, sağa, sola
• Sağdan karşıya, yukarı, aşağı
• Soldan karşıya, yukarı, aşağı

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ı

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;

@-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 #