CSS Geçişleri Nedir ve Nasıl Kullanılır?

Yayınlanan: 2022-02-16

Önceki bir makalede, CSS animasyonlarının temel kavramlarını ve bunların nasıl kullanılacağını öğrendiniz. Geçişlerin, aralarında bazı farklılıklar bulunan basitleştirilmiş bir animasyon biçimi olduğunu söyleyebiliriz, en alakalı olanı animasyonu tetikleme biçimidir.

Diğer bir fark, geçişlerin yalnızca iki duruma (ilk ve son durum) sahip olmasıdır, oysa animasyonlu bir öğe için @keyframes kuralıyla birden çok durum tanımlayabilirsiniz. Geçişler, örneğin bir öğenin üzerine gelindiğinde bir eylemde tetiklenir, ancak animasyonlar, örneğin sayfa yüklendikten sonra bir animasyon gecikmesi gibi belirli bir eylem olmadan gerçekleşebilir.

Bu derste, CSS Geçişlerinin temel kavramlarını pratik bir örnekle öğreneceğiz. Ek olarak, bir görüntü hareketli grafiğini CSS ile nasıl kullanacağınızı da öğreneceksiniz.

Hadi başlayalım!

Aşama 1. - Önerilen Düzen

CSS Geçişleri ve Nasıl Kullanılır

Bir web ajansının düzenli hizmetlerini tanıtan 4 kartımız var. Üzerine gelindiğinde, kartın içindeki öğelerin her biri, istenen efekti elde etmek için farklı bir geçişe sahip olacaktır.

Adım # 2. - HTML

  • Tercih ettiğiniz kod düzenleyiciyi açın
  • index.html adlı bir HTML dosyası oluşturun
  • Bu kodu kopyalayıp yapıştırın:
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>
POPUP'TA AÇ
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>

191125 css geçişleri 001

Servis-kart-konteynerinde 4 farklı kart bulunmaktadır. Her kart bir simge, bir başlık, bir miktar metin ve sitedeki ilgili bilgilere bir bağlantıdan oluşur. Kartın üzerine gelindiğinde metin ve bağlantı gösterilecektir, aksi takdirde gizleneceklerdir.

Aşama 3. - Temel CSS Stilleri

  • Bir CSS dosyası oluşturun ve onu style.css olarak adlandırın — HTML kodunda zaten bu dosyaya ve Google Fonts'a bir bağlantı var
  • Kartların tipografi stillerini ve arka plan rengini değiştirmek için bu stilleri kopyalayıp yapıştırın:
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }
POPUP'TA AÇ
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }

191125 css geçişleri 002

4. Adım. - Düzen Stilleri

Kartları oluşturmak ve yatay olarak düzenlemek için CSS Izgarasını kullanalım.

  • CSS kodunu düzenleyin:
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

Servis kartı kabı, 4 sütunlu yatay bir ızgaradır. Her kart aynı zamanda 2 sıralı grid kapsayıcı olarak tanımlanmıştır. Her kart için sabit bir yükseklik belirlediğimize dikkat edin.

191125 css geçişleri 003

Adım 5. - Görüntü Sprite'ı

W3Schools'a göre, bir görüntü hareketli grafiği, tek bir görüntüye yerleştirilmiş bir görüntü koleksiyonudur. Sayfanın yüklenmesi gereken her görüntü için bir sunucu isteği yapması gerekmeyeceğinden bant genişliğinden tasarruf edersiniz. Görüntüyü bir kez isteyecek ve ardından görüntünün gerekli bölümünü CSS kodu içinde eşleştireceksiniz.

191125 css geçişleri 004

Resim 240 piksel genişliğinde ve 480 piksel yüksekliğindedir. Simgelerin her biri 120x120 piksellik bir alanı kaplar. Görüntülerin her birini eşlemek için, görüntünün sol üst köşesinden koordinatlarla (0px 0px) başlıyoruz - 'sol - üst' sırasını izleyerek.

Bu şekilde, hareketli grafiğin sol sütunundaki resimler şurada bulunur:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Bunlar, gezinmeden önce kullanılacak görüntülerdir.

Sprite'ın sağ sütunundaki resimler şurada bulunur:

  • 120 piksel 0 piksel
  • 120 piksel -120 piksel
  • 120 piksel -240 piksel
  • 120 piksel -360 piksel
  • CSS kodunu düzenleyin:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }
POPUP'TA AÇ
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

Servis kartı kabı, 4 sütunlu yatay bir ızgaradır. Her kart aynı zamanda 2 sıralı grid kapsayıcı olarak tanımlanmıştır. Her kart için sabit bir yükseklik belirlediğimize dikkat edin.

191125 css geçişleri 003

Adım 5. - Görüntü Sprite'ı

W3Schools'a göre, bir görüntü hareketli grafiği, tek bir görüntüye yerleştirilmiş bir görüntü koleksiyonudur. Sayfanın yüklenmesi gereken her görüntü için bir sunucu isteği yapması gerekmeyeceğinden bant genişliğinden tasarruf edersiniz. Görüntüyü bir kez isteyecek ve ardından görüntünün gerekli bölümünü CSS kodu içinde eşleştireceksiniz.

191125 css geçişleri 004

Resim 240 piksel genişliğinde ve 480 piksel yüksekliğindedir. Simgelerin her biri 120x120 piksellik bir alanı kaplar. Görüntülerin her birini eşlemek için, görüntünün sol üst köşesinden koordinatlarla (0px 0px) başlıyoruz - 'sol - üst' sırasını izleyerek.

Bu şekilde, hareketli grafiğin sol sütunundaki resimler şurada bulunur:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Bunlar, gezinmeden önce kullanılacak görüntülerdir.

Sprite'ın sağ sütunundaki resimler şurada bulunur:

  • 120 piksel 0 piksel
  • 120 piksel -120 piksel
  • 120 piksel -240 piksel
  • 120 piksel -360 piksel
  • CSS kodunu düzenleyin:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }

191125 css geçişleri 005

Fena değil, değil mi? Bu kısmı biraz dolgu ile bitirmek için biraz kozmetik dokunuş ekleyelim.

  • CSS kodunu düzenleyin:
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }
POPUP'TA AÇ
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }

191125 css geçişleri 006

Adım #6. - CSS Geçişleri

CSS geçiş özelliğinin 4 farklı alt özelliği vardır:

  • geçiş özelliği (geçişin uygulanacağı öğenin özelliği)
  • geçiş süresi
  • geçiş-zamanlama-fonksiyonu
  • geçiş gecikmesi

Kısa yol:

geçiş: [geçiş-özelliği] [geçiş-süresi] [geçiş-zamanlama-fonksiyonu] [geçiş-gecikmesi]

  • CSS kodunu düzenleyin:
 /* TRANSITIONS */

 .service-card {
 transition: margin-top 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
 }

 .service-card:hover {
 margin-top: -5em;
 height: 25em;
 background: #006e9c;
 }


Fark ettiğiniz gibi, farklı eleman özelliklerine virgülle ayırarak çoklu geçişler uygulamak mümkündür. Bu geçişlerin hiçbirinde gecikme yoktur.

Kartın yukarı doğru yuvarlanmasını sağlamak için, üste negatif bir kenar boşluğu ayarlarsınız ve bu kenar boşluğunun mutlak değerini öğenin yüksekliğine eklersiniz (320px == 20em).

191125 css geçişleri 008

Artık görüntüleri hedef almanın ve bir geçişle değiştirmenin zamanı geldi.

  • CSS kodunu düzenleyin:
 .icon-strategy,
 .icon-ui-ux-design,
 .icon-development,
 .icon-digital-marketing {
   transition: background 0.4s step-end;
 }

 .service-card:hover .icon-strategy {
   background: url(./sprite.png) 120px 0;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-ui-ux-design {
   background: url(./sprite.png) 120px -120px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-development {
   background: url(./sprite.png) 120px -240px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-digital-marketing {
   background: url(./sprite.png) 120px -360px;
   width: 120px;
   height: 120px;
 }

Bir kez daha:

  • geçiş özelliği: arka plan
  • geçiş süresi: 0.4s
  • geçiş-zamanlama-fonksiyonu: adım sonu

Gerisi sadece görüntü hareketli grafiğindeki tam koordinatla (yukarıda ayrıntılı olarak) eşleştirilir.

191125 css geçişleri 009

Son olarak, .hidden kapsayıcısını hedefleyelim.

  • CSS kodunu düzenleyin:
 .hidden,
 .hidden a {
 transition: color 0.4s ease-out 0.2s;
 }

 .service-card:hover .hidden {
 height: auto;
 }
 .service-card:hover .hidden,
 .service-card:hover .hidden a {
 color: white;
 }

Burada dikkat edilmesi gereken iki ayrıntı var:

  • Metnin rengindeki geçiş, 0,2 s'lik bir geçiş gecikmesine sahiptir.
  • Öğenin yükseklik özelliği, geçiş olmadan üzerine gelindiğinde değişir 
191125 css geçişleri 010

Geçişler, tüm büyük tarayıcılar tarafından desteklenir.

191125 css geçişleri 011

Umarım bu egzersizi beğenmişsinizdir. Okuduğunuz için teşekkürler!

Kod burada bulunabilir.