Css İle Animasyon Kullanımı

CSS ile animasyon yapmak için @keyframes kuralı kullanılır. Bu kural, bir öğenin belirli bir süre boyunca nasıl değişeceğini tanımlamak için kullanılır. Animasyonlar, öğeler üzerinde hareket, renk değişimi, opaklık gibi birçok görsel etkiyi sağlar. İşte CSS animasyonu oluşturmanın temel adımları: 1. @keyframes ile Animasyon Tanımlama @keyframes kuralı, animasyonun adımlarını ve bu adımlarda gerçekleşecek değişiklikleri tanımlar. Örnek: Basit Hareket Animasyonu @keyframes moveUp { 0% { transform: translateY(100px); /* Aşağıda başla */ opacity: 0; /* Görünmez */ } 50% { transform: translateY(50px); /* Ortaya yaklaş */ opacity: 0.5; /* Yarı saydam */ } 100% { transform: translateY(0); /* Yukarı hareket */ opacity: 1; /* Tam görünür */ } } 2. Animasyonu Öğeye Uygulama Animasyonu, bir öğeye uygulamak için animation özelliği kullanılır. Örnek: .box { width: 100px; height: 100px; background-color: blue; animation: moveUp 2s ease-in-out; /* 2 saniye, yumuşak geçiş */ } 3. Animasyon Özellikleri animation özelliği birden çok değer alabilir: animation-name: @keyframes ile tanımlanan animasyonun adı. animation-duration: Animasyonun ne kadar süreceği (ör. 2s, 500ms). animation-timing-function: Hız eğrisi (ease, linear, ease-in, ease-out, ease-in-out). animation-delay: Animasyonun başlamadan önce bekleyeceği süre. animation-iteration-count: Kaç kez tekrar edeceği (infinite sonsuz döngü için kullanılır). animation-direction: Animasyonun hangi yönde oynayacağı (normal, reverse, alternate). Örnek: .box { width: 100px; height: 100px; background-color: red; animation: moveUp 3s ease-in 1s infinite alternate; } moveUp: Animasyon adı. 3s: Süresi. ease-in: Yavaş başlayıp hızlanır. 1s: 1 saniye gecikmeli başlar. infinite: Sonsuz tekrar eder. alternate: Bir ileri bir geri oynar. 4. Tam Çalışan Örnek

Css İle Hizalama

Css ile Metnin aşağıya kaymasını istemiyorsanız aşağıdaki kodu kullanabilirsin. white-space: nowrap; /* alt satıra inme */ overflow:hidden; /* taşan kısımları gizle */ text-overflow:ellipsis; /* devamı varsa sonuna üç nokta */

Yazılım dili

Yazılıma başlamak istiyorum. Yazılıma başlamak için hangi dilleri öğrenmek gerekir. En iyi dil hangisi