Animasyonlar CSS'ye güçlü bir katkıdır, ancak metin biçimleri onlarla çalışmayı zorlaştırabilir. Chrome'un DevTools'u imdadınıza yetişiyor!

Doğru şekilde yapılan CSS animasyonları sitenizi başka bir seviyeye yükseltebilir. Ancak bu animasyonları oluşturmak, üzerinde hassas kontrol sağlayan araçlar olmadan zor olabilir. Ya animasyonunuzun her adımında tam olarak neler olduğunu görmenin bir yolu olsaydı?

Hem Google Chrome hem de Firefox'un DevTools özelliği, animasyonlarınızı inceleme olanağıyla birlikte gelir. Kendi animasyonlarınızı geliştirmek ve favori animasyonlarınıza web üzerinde tersine mühendislik uygulamak için bu özelliği nasıl kullanacağınızı öğrenin.

Chrome'un DevTools'u harika bir yoldur CSS'nizin tüm yönlerini ayıklayınve daha fazlası. Animasyonları incelemek için bunu nasıl kullanabileceğinizi anlamak için bu basit örnekle başlayın.

Bu örneklerin kodu şurada mevcuttur: GitHub deposu.

HTML ve CSS ile Animasyonları Tanımlayın

Aşağıdaki HTML, bir sayfayı iki öğeyle oluşturur: a ve bir. Sayfa aynı zamanda adlı bir CSS dosyasını da içe aktarır. stil.css:

instagram viewer 
html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<linkrel="stylesheet"href="style.css">
head>
<body>
<divid="box">div>
<button>Test Buttonbutton>
body>
html>

Her iki öğeye de stil vermek için bir stil.css Dosyayı HTML ile aynı klasöre koyun ve aşağıdakileri ekleyin:

#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000msease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1pxsolidblack;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100msease-in-out, color 100msease-in-out;
cursor: pointer;
}


button:hover {
background-color: black;
color: white;
}


@keyframes rotateAndChangeColor {
 0% {
rotate: 0deg;
background: red;
 }
 10% {
background: green;
 }
 40% {
background: blue;
 }
 70% {
background: yellow;
 }
 100% {
rotate: 360deg;
background: red;
 }
}

Bu stiller iki bileşen oluşturur:

  • Sayfa yüklendiğinde dönen ve renk değiştiren basit bir kutu.
  • Üzerine geldiğinizde arka plan rengini değiştiren bir düğme.

Kırmızı kutunun şunu kullanarak canlandırdığını unutmayın: CSS @ana kare yönergesidüğme bir geçiş kullanırken. Bu, tarayıcının DevTools'unu kullanarak iki yaklaşımı karşılaştırmanıza olanak tanır.

Erişmek için Animasyonlar Chrome DevTools'taki sekme:

  1. İçerik menüsünü açmak için sayfanıza sağ tıklayın.
  2. Tıklamak İncelemek.
  3. Sağ üst köşedeki üç noktaya tıklayın.
  4. Şu yöne rotayı ayarla Daha Fazla Araç > Animasyonlar.

Bu, alt bölümdeki animasyon çekmecesini açacaktır.

Sayfanızda meydana gelen animasyonlar burada görünecektir. Sayfanızı yenileyip butonun üzerine gelirseniz animasyonlar sekmesi altında animasyonlar görünecektir.

Gerçek güç, bu animasyonlardan birine tıkladığınızda ortaya çıkıyor. Örneğin, kutunun animasyonuna tıklarsanız tarayıcının ana kareleri aşağıdaki gibi sunduğunu görürsünüz:

DevTools, seçtiğiniz öğeyle ilgili tüm animasyonları görüntüler. Kırmızı kutu için tanımlanmış tek bir animasyon olduğundan;döndürVeRengiDeğiştir— yalnızca ayrıntılarını göreceksiniz.

Animasyonu daha hızlı hale getirmek için çizgiyi sola sürükleyebilir veya animasyonu yavaşlatmak için sağa sürükleyebilirsiniz. Ayrıca duraklatma ve oynatma simgelerini değiştirerek animasyonu belirli noktalarda duraklatabilirsiniz. Üstteki yüzdeler, animasyonu sırasıyla normal hızının dörtte biri ve onda biri hızında oynatmanıza olanak tanır.

Düğme geçişini incelediğinizde DevTools geçişin bireysel özelliklerini gösterecektir: renk ve arka plan rengi.

Bu araç, tam olarak nasıl çalıştığını görmek için animasyonunuzu değiştirmenizi sağlar. Bunu yapmak için kullanabilirsiniz web sitenizdeki sorunları giderin herhangi bir sorun varsa.

Gelişmiş Animasyon Örnekleri

HTML'nizdeki işaretlemeyi değiştirerek başlayın aşağıdaki işaretlemeyle etiketleyin:


class="move-me move-me-1">steps(4, end)</div>
<br />

class="move-me move-me-2">steps(4, start)</div>
<br />

class="move-me move-me-3">no steps</div>

Ardından, cihazınızdaki tüm stilleri değiştirin. stil.css bununla dosya:

.move-me {
display: inline-block; 
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8ssteps(4, end) infinite;
}


.move-me-2 {
animation: move-in-steps 8ssteps(4, start) infinite;
}


.move-me-3 {
animation: move-in-steps 8sinfinite;
}


body {
padding: 20px;
}


@keyframes move-in-steps {
 0% {
left: 0;
background: blue;
 }
 100% {
left: 100%;
background: red;
 }
}

Hepsi elementler var adım adım hareket konumu ve arka plan rengini değiştiren animasyon onlara uygulanır. Buna ek olarak, her kutunun atacağı adım sayısını kontrol etmek için farklı bir animasyonu vardır.

Üçüncü kutu sürekli olarak sağa doğru kayarken, ilk ikisi ekranın sonuna ulaşana kadar her seferinde iki adım ilerleyecek (ikinci kutu ilk kutudan önce başlayacak).

Eğer açarsan Animasyonlar DevTools sekmesine gidin ve sayfayı yenileyin, bu animasyonlarla ilgili tüm bilgileri bulacaksınız:

Hepsi aynı dönemde canlanan çeşitli unsurlar vardır. Bu senaryoda, arka plan rengi ve kutu konumu üç kutunun tümü için aynı anda canlandırılır.

Dikkat edilmesi gereken bir diğer nokta ise her animasyon satırındaki düğümlerdir. Bir animasyon sonsuz sayıda tekrarlandığında, düğümler her tekrarın animasyonda nerede başlayıp nerede bittiğini gösterir.

Boş düğümler aslında animasyonunuzdaki ana karelerdir; düz, renkli olanlar ise animasyonun başlangıcını ve sonunu temsil eder. Animasyonunuz her yeniden başladığında koyu renkli düğümlere sahip olacaksınız.

Son olarak, herhangi bir CSS özelliğinde olduğu gibi DevTools'u kullanarak animasyonları düzenleyebilirsiniz. Animasyon kullanıcı arayüzünü kullanarak yaptığınız tüm değişiklikler, aşağıdaki satır içi stillerde görünecektir. Stiller sekmesi ve tam tersi. Bu, değişiklikler yapmanıza, bunları test etmenize ve gerçek projenize kopyalamanıza olanak tanır.

Google Chrome'un DevTools özelliği, animasyonlar da dahil olmak üzere CSS'nizde hata ayıklamak için harika bir araçtır. Sayfanızdaki her geçişin ve animasyonun ayrıntılı bir görünümünü sağlar, böylece her adımda tam olarak ne olduğunu görebilirsiniz.

Bir web geliştiricisi olarak tarayıcınızın DevTools işlevine veya eşdeğerine aşina olmanız gerekir.