Web Tasarımı
Trend

19 Havalı CSS animasyon örneği

En iyi CSS animasyon örnekleri ve bunların nasıl kodlanacağına dair tavsiyeler bu yayınımızda.

Muhtemelen, son zamanlarda web sitelerinde ve uygulamalarda birçok CSS animasyon örneğinin ortaya çıktığını fark etmişsinizdir. Animasyon bir süredir büyük bir trend olmuştur ve hiçbir yere gitme belirtisi göstermemektedir.

Animasyon söz konusu olduğunda sınırlı görünse de, CSS aslında gerçekten güçlü bir araçtır ve 60fps’lik pürüzsüz animasyonlar üretme yeteneğine sahiptir. Web üzerinden tasarımcılar, kişiliğini sitelerine kazandırmak, karmaşık fikirleri zahmetsizce yakalamak ve kullanıcılarının davranışlarını incelikle yönlendirmek için yaratıcılık yapıyor ve CSS animasyonlarını kullanıyor.

Altın kural, CSS animasyonlarınızın aşırı şişirilmemesi gerektiğidir. Küçük bir hareket bile büyük bir etkiye sahip olabilir ve kullanıcılar için çok fazla rahatsız edici olabilir. Çevrimiçi gördüğünüz en iyi animasyonlar hala Disney’in klasik 12 animasyon ilkesinde yer alıyor.

Bu makalede, dünyanın dört bir yanındaki web sitelerinden en iyi CSS animasyon örneklerini bir araya getirdik ve bu etkilerin nasıl elde edileceğini size göstermek için koda girdik. Kendinizi keşfetmeniz için derinlemesine tutorial’lar ve ilham verici efektler (ve kodlarına bağlantılar) için okumaya devam edin veya CSS animasyonunun ne zaman ve nasıl kullanılacağına ilişkin bazı önemli ipuçları için 3. sayfaya atlayın.

CSS animasyonu nedir?

CSS animasyonu, belirli HTML öğelerini işlemciyi ve belleğe aç JavaScript’i veya Flash’ı kullanmak zorunda kalmadan canlandırma yöntemidir. Değiştirilebilecek CSS özelliklerinin sayısı veya sıklığı için bir sınır yoktur. CSS animasyonları, animasyon için anahtar kareler belirtilerek başlatılır: bu anahtar kareler, öğenin sahip olacağı stilleri içerir.

01. Yuvarlanan yazı

css animasyonu

Google’ın Yılın Oyunu ana sayfasında eğlenceli bir CSS animasyonu ve başlık kelimeleri birbirine çarparak aşağı doğru düşüyor. İşte böyle yapıldı:

İlk adım, web sayfası belgesini HTML ile tanımlamaktır. Bir baş ve gövde bölümünü tanımlayan HTML belge kalıbından oluşur. Baş bölümü harici CSS ve JavaScript kaynaklarını yüklemek için kullanılırken, gövde sayfa içeriğini depolamak için kullanılır.

<!DOCTYPE html>
<html>
<head>
<title>Off Kilter Text Animation</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="code.js"></script>
</head>
<body>
  <h1 class="animate backwards">The Animated Title</h1>
  <h1 class="animate forwards">The Animated Title</h1>
  <h1 class="animate mixed">The Animated Title </h1>
</body>
</html>

Sayfa içeriği, animasyon efektinin farklı çeşitlerini gösterecek üç h1 başlık etiketinden oluşur. Bu etiketlere herhangi bir metin eklenebilirken, animasyonları sınıf niteliğindeki adlarla tanımlanır. Bu sınıf isimlerinin sunum ve animasyon ayarları daha sonra CSS’de tanımlanacaktır.

Ardından, ‘ code.js ‘ adında yeni bir dosya oluşturun. Tüm sayfa öğelerini animate sınıfıyla birlikte bulmak ve iç metnin her bir sözcüğünü temsil eden bir dizi listesi oluşturmak istiyoruz. İlk animasyon gecikmesi de bu adımda tanımlanır. Sayfa içeriği tamamen yüklenene kadar kullanılamaz, bu nedenle bu kod pencerenin load olayı dinleyicisine yerleştirilir.

Animasyon öğelerinin kelime içeriğinin bir yayılma (span) öğesinin içinde bulunması gerekir. Bunu yapmak için, mevcut HTML içeriği boş olarak sıfırlanır, daha sonra tanımlanmış ‘kelimeler’ listesindeki kelimeyi bir yayılma elemanı yapmak için bir döngü kullanılır. Ek olarak, bir animationDelay stili uygulanır. İlk gecikmeye (aşağıda belirtilen) ve sözcüğün dizin konumuna göre hesaplanır.

window.addEventListener("load", function(){
	var delay = 2;
	var nodes = document.querySelectorAll
(".animate");
	for(var i=0; i<nodes.length; i++){
		var words = nodes[i].innerText.split(" ");
		nodes[i].innerHTML = "";
for(var i2=0; i2<words.length; i2++){
			var item = document.createElement("span");
			item.innerText = words[i2];
			var calc = (delay+((nodes.length + i2)/3));
	item.style.animationDelay = calc+"s";
			nodes[i].appendChild(item);
}
	}
});

Styles.css adlı yeni bir dosya oluşturun. Şimdi animasyondaki her kelime öğesinin parçası olacak sunum kurallarını span etiketleriyle kontrol edeceğiz. Ortalanmış metin hizalamasıyla birlikte blok olarak gösterilmesi, her kelimenin kabının ortasına yatay olarak hizalanmış ayrı bir satırda görünmesine neden olur. Göreceli konumlandırma, metin akışı (text-flow ) konumuna göre animasyon uygulamak için kullanılacaktır.

.animate span{
	display: block;
	position: relative;
	text-align: center;
}

Geriye ve ileriye sınıfları olan animasyon öğelerinin kendilerine uygulanan belirli bir animasyonu vardır. Bu adım, üst kabı hem animasyonlu hem de ileri ya da ileri sınıfına sahip olan yayılma öğelerine uygulanacak animasyonu tanımlar.

Ana öğenin her ikisine de sahip olması gereken, canlı ve geriye doğru sınıf referansı arasında nasıl boşluk olmadığına dikkat edin.

.animate.backwards &gt; span{
	animation: animateBackwards 1s ease-in-out 
forwards;
}
.animate.forwards &gt; span{
	animation: animateForwards 1s ease-in-out 
forwards;
}

Karışık animasyon ileri ve geri animasyonlar için kullanılan aynı ayarları kullanarak tanımlanır. Animasyonları ebeveynin her çocuğuna uygulamak yerine, nth-child seçici, alternatif animasyon ayarlarını uygulamak için kullanılır. Geriye animasyon her sayıdaki çocuğa uygulanırken, ileriye dönük animasyon her sayıdaki çocuğa uygulanır.

.animate.mixed &gt; span:nth-child(even){
	animation: animateBackwards 1s ease-in-out 
forwards;
}
.animate.mixed &gt; span:nth-child(odd){
	animation: animateForwards 1s ease-in-out 
forwards;
}

Yeni yarattığımız animasyonlar, başlangıç ​​pozisyonu ile dikey pozisyon veya rotasyon ayarı olmadan yapılır. ‘ To ‘ pozisyonu, unsurları ayarlanmış bir dikey pozisyona ve dönüş durumuna ayarlayan canlandırmanın son halidir. Karışık animasyonlarda çakışma nedeniyle metnin okunamaz hale gelmesini önlemek için her iki animasyonda da biraz farklı bitiş ayarları kullanılır.

@keyframes animateForwards {
	from { top: 0; transform: rotate(0deg); }
	to { top: .9em; transform: rotate(-15deg); }
}
@keyframes animateBackwards {
	from { top: 0; transform: rotate(0deg); }
	to { top: 1em; transform: rotate(25deg); }
}

02. Kabarcıklar üfleme

7UP’da yer alan CSS bubble animasyonu, marka temasını web sitesi tasarımına taşımanın güzel bir örneğidir. Animasyon birkaç unsurdan oluşur: kabarcıkların SVG ‘çizimi’ ve ardından her bir balona uygulanan iki animasyon.

İlk animasyon balonun opaklığını değiştirir ve görünüm kutusuna dikey olarak hareket ettirir; ikincisi, ek gerçekçilik için yalpalama etkisi yaratır. Ofsetler, her bir balonu hedefleyerek ve farklı bir animasyon süresi ve gecikmesi uygulayarak işlenir.

Baloncuklarımızı oluşturmak için SVG kullanacağız. SVG’de iki kat kabarcık oluşturuyoruz: biri büyük kabarcıklar için diğeri küçük kabarcıklar için. SVG içinde tüm baloncuklarımızı görünüm kutusunun altına yerleştiririz.

<g class="bubbles-large" stroke-width="7">
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
  ...
</g>
<g class="bubbles-small" stroke-width="4">
  <g transform="translate(147 984)">
  <circle cx="15" cy="15" r="15"/>
  </g>
</g>
  ...
</g>

SVG’lerimize, her ikisi de transform özelliğini kullanan iki ayrı animasyon uygulamak için, animasyonları ayrı öğelere uygulamamız gerekir. SVG’deki <g> öğesi HTML’deki bir div gibi kullanılabilir; kabarcıklarımızın her birini (zaten bir grupta olan) bir grup etiketine sarmamız gerekiyor.

<g>
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
</g>

CSS, karmaşık animasyonlar üretmek için güçlü bir animasyon motoruna ve gerçekten basit bir koda sahiptir. Animasyonun başlangıcında ve bitiminde kabarcıkları ekrana taşıyarak ve opaklıklarını değiştirerek başlayıp solmasını sağlayacağız.

@keyframes up {
  0% {
  opacity: 0;
  }
  10%, 90% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  transform: translateY(-1024px);
  }
}

Bir yalpalama efekti oluşturmak için balonu sadece sağa ve sola hareket ettirmek (veya çevirmek) yeterlidir. Çok fazlası animasyon çok gösterişli ve kesik görünmesine neden olurken, çok az fark edilmeden gider. Deneme, yanılma yolu animasyonla çalışırken bir anahtardır.

@keyframes wobble {
  33% {
  transform: translateX(-50px);
  }
  66% {
  transform: translateX(50px);
  } }

Animasyonu kabarcıklarımıza uygulamak için, daha önce kullandığımız grupları ve her bir kabarcık grubunu ayrı ayrı tanımlamak için
nth-of-type yardımını kullanacağız. Donanım ivmesini kullanmak için kabarcıklara ve will-change özelliğine bir opaklık değeri uygulayarak başlıyoruz.

.bubbles-large &gt; g {
  opacity: 0;
will-change: transform, opacity;}
.bubbles-large g:nth-of-type(1) {...}
...
.bubbles-small g:nth-of-type(10) {...}

Tüm animasyon zamanlarını ve gecikmelerini birbirlerinin birkaç saniyesinde tutacağız ve onları sonsuza dek tekrarlamaya ayarlayacağız. Son olarak, biraz daha doğal görünmesi için kolay hareket zamanlama işlevini yalpalama animasyonumuza uygularız.

.bubbles-large g:nth-of-type(1) {
  animation: up 6.5s infinite; }
.bubbles-large g:nth-of-type(1) circle {
  animation: wobble 3s infinite ease-in-out; }
...
bubbles-small g:nth-of-type(9) circle {
  animation: wobble 3s 275ms infinite ease-in-out; }
.bubbles-small g:nth-of-type(10) {
animation: up 6s 900ms infinite;}

03. Kayan fare orta tuşu

İnce bir kayan fare animasyonu, bir web sitesine ilk kez girildiğinde kullanıcıya yön verebilir. Bu, HTML öğeleri ve özellikleri kullanılarak gerçekleştirilse de, çizim için daha uygun olduğundan SVG kullanacağız.

SVG’mizin içinde, köşeleri yuvarlatılmış bir dikdörtgene ve canlandıracağımız öğe için bir daireye ihtiyacımız var, SVG kullanarak simgeyi ihtiyacımız olan her boyuta ölçeklendirebiliriz.

<svg class="mouse" xmlns="..." viewBox="0 0 76 130" preserveAspectRatio="xMidYmid meet">
  <g fill="none" fill-rule="evenodd">
  <rect width="70" height="118" x="1.5" y="1.5" stroke="#FFF" stroke-width="3" rx="36"></rect>
  <circle cx="36.5" cy="31.5" r="4.5" fill="#FFF"></circle>
  </g>
</svg>

Şimdi SVG’lerimizi yarattık, simgenin çerçevemizdeki boyutunu ve konumunu kontrol etmek için bazı basit stiller uygulamamız gerekiyor. Fare SVG’nin etrafına bir bağlantı sardık ve ekranın altına yerleştirdik.

.scroll-link {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.mouse {
  max-width: 2.5rem;
  width: 100%;
  height: auto;
}

Ardından animasyonumuzu yaratacağız. Animasyonumuzun yüzde 0 ila 20’sinde, elementimizin durumunu başlarken belirlemek istiyoruz. Yolun% 20’sine ayarlayarak, sonsuza dek tekrarlandığında bir süre daha kalacaktır.

@keyframes scroll {
  0%, 20% {
  transform: translateY(0) scaleY(1);
  }
}

Opaklık başlangıç ​​noktasına eklememiz ve ardından Y pozisyonunu ve dikey ölçeği, animasyonumuzun sonu olan% 100 işaretinde dönüştürmemiz gerekir. Yapmamız gereken son şey, çevremizi yok etmek için opaklığı düşürmektir.

@keyframes scroll {
  ...
  10% {
  opacity: 1;
  }
  100% {
  transform: translateY(36px) scaleY(2);
  opacity: 0.01;
  }
}

Son olarak, animasyonu çembere, ‘transform-origin’ özelliği ve donanım ivmesini sağlamak için will-change özelliği ile birlikte uyguluyoruz. Animasyon özellikleri oldukça açıklayıcı. cubik-bezier zamanlama fonksiyonu ilk önce daireyi fare şeklimizin altına düşürmeden önce geri çekmek için kullanılır; Bu, animasyona eğlenceli bir hava katıyor.

.scroll {
  animation-name: scroll;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
  animation-iteration-count: infinite;
  transform-origin: 50% 20.5px;
  will-change: transform;
}

04. Animasyonlu yazı

css animasyonu
Animasyonu çalışırken görmek için resme tıklayın

Garden Eight web sitesi, metnin yazıldığı yer gibi görünen yaygın bir animasyon tekniği kullanıyor. Etkiye ulaşmak için SVG’ye geçiyoruz. Başlamak için, SVG’yi oluşturacağız. Burada iki yaklaşım var: onları canlandırmak ve SVG metni kullanmak için metni yollara dönüştürmek. Her iki yaklaşımın da artıları ve eksileri var.

Anahtar kare animasyonumuzu oluşturarak başlayın. Yapmamız gereken tek fonksiyon, stroke-dashoffset ‘ini değiştirmektir. Şimdi animasyonumuzu oluşturduk, canlandırmak istediğimiz değerleri uygulamamız gerekiyor. Stroke içinde boşluklar yaratacak stroke-dasharray’i ayarladık. Strokumuzu tüm öğeyi kaplayacak kadar büyük bir değer olarak ayarlamak istiyoruz, sonunda çizgiyi kontur uzunluğuyla dengelemek istiyoruz.

Büyü, animasyonumuzu uyguladığımızda gerçekleşir. Ofseti canlandırarak, darbeyi görünüme getiriyoruz. Bir çizim efekti yaratıyoruz. Elementlerin bir kerede bir tane çizmesini istiyoruz, bazıları ise bir elemanın çizilmesi ile bir sonrakini çizmeye başlaması arasında örtüşüyor. Bunu başarmak için, her bir harfi animasyonun uzunluğu boyunca yarıya kadar geciktirmek için belirli bir harfin konumu ile çarparak geciktirmek için Sass / SCSS ve ‘ in’ türüne dönüyoruz.

05. Uçan kuşlar

Tamamen düz vektör çizgilerle başlıyoruz, animasyonu her kareyi çiziyoruz, kuşu farklı bir uçuş durumunda gösteriyoruz. Sonra vektör noktalarını değiştiririz, çizgileri ve kenarları yuvarlarız. Son olarak, her kareyi eşit büyüklükte bir kutuya koyuyoruz ve yan yana yerleştiriyoruz. Dosyayı SVG olarak dışa aktarın.

HTML kurulumu gerçekten basittir. Birden çok canlandırmayı uygulamak için her bir kuşu bir çerçeveye eklemeniz gerekiyor. Biri kuşu uçuracak, diğeri ekran boyunca hareket ettirecek.

<div class="bird-container">
  <div class="bird"></div>
</div>

Kuş SVG’imizi kuş divimize arka plan olarak uyguluyoruz ve her karenin olmasını istediğimiz boyutu seçiyoruz. Genişliği, yeni arka plan konumunu kabaca hesaplamak için kullanıyoruz. SVG’de 10 hücre vardır, bu yüzden genişliğimizi 10’la çarpıyoruz ve sonra doğru görünene kadar sayıyı biraz değiştiriyoruz.

.bird {
  background-image: url('bird.svg');
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;
}
@keyframes fly-cycle {
  100% {
  background-position: -900px 0;
  } 
}

CSS animasyonunun farkında olmadığınız birkaç püf noktası vardır. Görüntüyü adımlarla göstermek için animasyon-zamanlama işlevini (
animation-timing-function) kullanabiliriz. Tıpkı bir defterdeki sayfalar arasında gezinmek gibi, animasyonu canlandırmak için.

animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
animation-duration: 1s;
animation-delay: -0.5s;

Şimdi sinek döngümüzü yarattık, kuşumuz şu anda kanatlarını çırpıyor ama hiçbir yere gitmiyor. Onu ekranda hareket ettirmek için başka bir ana kare animasyonu yaratıyoruz. Bu animasyon kuşu ekran boyunca yatay olarak hareket ettirirken, aynı zamanda kuşun daha gerçekçi bir şekilde kıvrım yapmasına izin vermek için dikey konumu ve ölçeği de değiştirecektir.

Animasyonlarımızı bir kez yarattıktan sonra, sadece onları uygulamamız gerekiyor. Kuşumuzun birden fazla kopyasını oluşturabilir ve farklı animasyon zamanları ve gecikmeleri uygulayabiliriz.

.bird--one {
  animation-duration: 1s;
  animation-delay: -0.5s;
}
.bird--two {
  animation-duration: 0.9s;
  animation-delay: -0.75s;
}

06. Hamburger Menuden Çapraz Menüye

Bu animasyon tüm web’de kullanılır, üç çizgiyi çapraz veya kapalı bir simgeye dönüştürür. Oldukça yakın bir zamana kadar, uygulamaların çoğu HTML öğeleri kullanılarak sağlandı, ancak aslında SVG, bu tür bir animasyon için çok daha uygundur. Artık düğmeler ile kodunuzu çoklu alanlarla şişirmenize gerek kalmadı.

Canlandırılabilir doğası, SVG ve gezilebilir DOM’si nedeniyle, animasyonu veya geçişi gerçekleştiren kod çok az değişir ve teknik aynıdır.

Dört element oluşturarak başlıyoruz, bir div’in içine ya da SVG’nin içindeki yollara yayılmış. Açıklık kullanıyorsak, CSS’yi onları div içine yerleştirmek için kullanmamız gerekir; Eğer SVG kullanıyorsak, bu zaten halledilir. 2 ve 3 numaralı çizgileri ortada konumlandırmak istiyoruz. Biri diğerinin üstüne, 1 ve 4 numaralı çizgileri eşit bir şekilde yukarıda ve altta, dönüşün ortasını da ortalamak için yerleştirmek istiyoruz.

İki özelliği değiştirmeye güveneceğiz: opaklık ve döndürme. Her şeyden önce, nth-child selector’ı kullanarak hedefleyebileceğimiz 1. ve 4. satırları silmek istiyoruz.

.menu-icon.is-active {element-type}:nth-child(1),
.menu-icon.is-active {element-type}:nth-child(4) {
  opacity: 0; }

Yapılması gereken tek şey iki orta çizgiyi hedeflemek ve zıt yönlerde 45 derece döndürmektir.

.menu-icon.is-active {element-type}:nth-child(2) {
  transform: rotate(45deg); }
.menu-icon.is-active {element-type}:nth-child(3) {
transform: rotate(-45deg); }

07. Çevreleri takip etmek

Animasyonlu yükleme simgesi dört daireden oluşur. Dairelerin dolguları yoktur, ancak değişen kontur renkleri vardır.

<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">
  <circle cx="170" cy="170" r="160" stroke="#E2007C"></circle>
  <circle cx="170" cy="170" r="135" stroke="#404041"></circle>
  <circle cx="170" cy="170" r="110" stroke="#E2007C"></circle>
  <circle cx="170" cy="170" r="85" stroke="#404041"></circle>
</svg>

CSS’mizde , tüm çevrelerimize bazı temel özellikler koyabilir ve ardından her daireye farklı bir stroke-dasharray uygulamak için : nth-of-type seçiciyi kullanabiliriz.

circle:nth-of-type(1) {
  stroke-dasharray: 550; 
}
circle:nth-of-type(2) {
  stroke-dasharray: 500; 
}
circle:nth-of-type(3) {
  stroke-dasharray: 450;}
circle:nth-of-type(4) {
  stroke-dasharray: 300; 
}

Daha sonra, anahtar kare animasyonumuzu yaratmamız gerekiyor. Animasyonumuz gerçekten basit: tek yapmamız gereken daireyi 360 derece döndürmek. Dönüşümümüzü animasyonun % 50 işaretine yerleştirerek, daire aynı zamanda orijinal konumuna geri dönecektir.

@keyframes preloader {
  50% {
  transform: rotate(360deg);
  } 
}

Animasyonumuz yaratıldığında, çevrelerimize uygulamamız yeterli. Animasyon adını belirledik; süresi; yineleme sayımı ve zamanlama fonksiyonu. ‘ease-in-out’ , animasyona daha eğlenceli bir his verecektir.

animation-name: preloader;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;

Şu anda yükleyicimiz var, ancak tüm elemanlar aynı anda birlikte dönüyor. Bunu düzeltmek için bazı gecikmeler uygulayacağız. Gecikmelerimizi döngü için bir Sass kullanarak yaratacağız.

@for $i from 1 through 4 {
  &amp;:nth-of-type(#{$i}) {
  animation-delay: #{$i * 0.15}s;
} }

Gecikmeler nedeniyle çemberimiz şimdi sırayla canlanıyor ve birbirlerini kovalayan çemberlerin yanılsamasını yaratıyor. Bununla ilgili tek sorun, sayfa ilk yüklendiğinde, dairelerin statik olması ve ardından birer birer hareket etmeye başlamasıdır. Aynı ofset efektini başarabiliriz, ancak gecikmeleri negatif bir değere ayarlayarak animasyonumuzdaki istenmeyen duraklamayı durdururuz.

animation-delay: -#{$i * 0.15}s;

Daha fazla CSS animasyon örneği Keşfetmek için sonraki sayfa

1 2 3Sonraki sayfa
Etiketler
Online Eğitime Özel Masaüstü Bilgisayar Kampanyası

İlgili Makaleler

Bir Yorum

  1. Elinize sağlık hocam ancak şu kuş efektinde birşeye takıldım anlayamadım daha doğrusu sinek efektini yaptıktan sonra kuş olduğu yerde ucuyor güzel hoş ancak konteynır boyunca uçmasını bi beceremedim bi yardımcı olursanız sevinirim

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu