CSS ile SVG'ye animasyon nasıl eklenir

Jan 29, 2026
Nasıl Yapılır
Image: Web Designer
[Resim: Web Tasarımcısı]

SVGS ile animasyon söz konusu olduğunda, bir büyük kapanma, JavaScript kütüphanelerinde aşağılanma fikri olabilir. Ancak, bu durum olmak zorunda değil. CSS, efektler oluşturmak için bir SVG içindeki bireysel yolları seçmeyi başarabilir. Sadece temel bilgileri bilmek, düz, klişeli simgeleri biraz daha etkileyici bir şey haline getirmenin mümkün olduğu anlamına gelebilir. Böylece belki de SVG optimizasyonu ve animasyonun temel adımları arasında geçiş zamanıdır. Farklı tasarımlara entegre edildiğinde, olasılıkların sonsuz olduğunu anlamak uzun sürmez.

Daha fazla hareket ilham almak için, Yaratıcı Bloq's rehberine bir göz atın. CSS animasyon örnekleri ve nasıl kodlanır.

Süper erken bir kuş bileti ile 100 £ kazanın Css oluşturmak , bir günlük web konferansı Creative Bloq, Web Designer Dergisi ve Net Dergisi tarafından barındırılan. Buraya kitap .

01. Yarat ve Kaydet

İlk önce, çalışmak için bir SVG oluşturun. Bu eğitim için, Illustrator'da yapılan basit bir grafik kullanacağız. Bir SVG'yi dışa aktarmak için Illustrator'ı kullanırken, grafiğe uyacak şekilde çalışmanın boyutunu azaltın, ardından 'Kaydet' yi tıklatın. 'Tip olarak kaydet' açılır menüsünden SVG'yi seçin, ardından SVG seçenekleri diyalogunda 'SVG kodu ...'.

02. Web için optimize edin

SVG screenshot

Resmi büyütmek için sağ üstteki simgeye tıklayın [Resim: SVGOMG]

Gereksiz etiketleri kesmek, görüntünün başa çıkmasını kolaylaştıracaktır. Bu, kodu favori editörünüze kopyalayarak ve boş etiketleri ve meta verileri kaldırarak manuel olarak yapılabilir. Alternatif olarak, fantastik bir kaynak denir Svgomg Bunu otomatik olarak yapacak. Kodu SVGOMG arayüzündeki 'Yapıştırma İşaretleme' alanına yapıştırın, ardından alt taraftaki düğmeyi kullanarak görüntüyü tekrar kopyalayın.

03. Bir HTML belgesi ayarlayın

Seçim kodunu açın ve boş bir HTML belgesi ayarlayın. CSS animasyonunu denilen bir dosyada yazacağız. ana.css , bu yüzden bunu da yarat. Animasyona odaklanan şeyleri tutmak için, Bootstrap 4.1.3'ün CSS-SADECE sürümünü çektik.

04. Düzeni oluşturun

Düzenimizin kemiklerini kuralım ve SVG için bir alan yapalım. Bir başlık ve iki sütun ekledik: bir metin için solda ve sağdaki bir tane, animasyon yapacağımız SVG'yi tutacak. Sayfayı yukarı canlandırmak için, vücut etiketinde bir arka plan olarak ikinci, statik, SVG kullanın.

05. SVG'yi yerleştirin

Sayfanın üstündeki girişi daha ilginç hale getirmek için animasyonumuzu kullanıyoruz. Optimize edilmiş SVG kodunu sayfadaki ikinci sütuna yapıştırın. Bootstrap kullanıyorsanız, SVG'yi sınıfa verin img sıvısı Cep telefonlarında ölçeklendirdiğinden emin olmak için.

06. SVG'ye dersler ekleyin

SVG'ye sınıf eklemek, CSS'nin görüntü içindeki bireysel şekilleri seçmesini sağlar. Bu, görüntünün farklı şekillerini farklı zamanlarda canlandırabileceğiniz anlamına gelir, daha karmaşık bir etki yaratır. 

 & lt; svg & gt;
& lt; g & gt;
& lt; rektunlu = "rectbackground" genişliği = "147.4107"
Yükseklik = "68.7917" x = "31.2946" y = "114.1042"
rx = "4.5882" ry = "3.9565" dolgu = "# 2A7FFF" / & gt;
& lt; yol sınıfı = "recttext" d = "..." vektör efekti = "Ölçekleme-inme" inme-genişliği = ". 470476156" Yazı tipi boyutu = "12" dolgu = "# fff"
Doldur-kuralı = "evenodd" strok = "# fff" strok-lineecap = "yuvarlak" / ve gt;
& lt; / g & gt;
& lt; / svg & gt;

07. İlk Devletler

CSS'deki SVG elemanlarımızın seçilmesi, başka bir öğeyle aynıdır. SVG içindeki öğeleri seçmek için sınıflarımızı kullanıyoruz. SVG'imizin her iki kısmı, sayfa yüklendiğinde gizlenecek şekilde başlayacaktır, bu yüzden her iki öğenin opaklığını da ayarlamak için CSS'yi kullanalım. 0 . 

 path.recttext {
Opaklık: 0;
}
rect.rectbackground {
Opaklık: 0;
}

08. Animasyonları ilan edin

Her animasyon için isim ve anahtar kareleri beyan etmemiz gerekir, böylece CSS'nin bir etki yapmasını istediğimizde ne yapmak istediğimizi biliyor. seçtiğim textdraw ve rectfade , her animasyonu tarif ettikçe. rectfade basit bir iki adımlı animasyon olacak. textdraw ekstra bir orta adıma sahip olacak. 

 (@keyframes textdraw {
0% {}
% 50 {}
100%{}
}
@keyframes rectfade {
{} dan
{} için
}

09. Animasyon ve özellikleri atayın

SVG and coding

Görüntüyü büyütmek için üstündeki simgeye tıklayın [Resim: Joseph Ford]

Ekliyoruz rectfade animasyon rectbackground eleman ve bir saniyede bir süre ver. Bir kolaylaştırmak Kübik Bezier, daha yumuşak bir his vermek için kullanılıyor. Ekleriz ileri Böylece eleman, animasyon bittiğinde son anahtar çerçevesinin özelliklerini tutar. 

 rect.rectbackground {
Opaklık: 0;
Animasyon: Rectfade 1s Cubic-Bezier (0.645,
0.045, 0.355, 1) ileri;
}

10. Dikdörtgen animasyonu

SVG image

Görüntüyü büyütmek için üstündeki simgeye tıklayın [Resim: Joseph Ford]

Sadece iki ana kare ile, dikdörtgenimiz için yapmamız gereken tek şey bir başlangıç ​​ve bitiş nitelikleri ayarlayın. Bir ile başlayalım % 1 genişlik ve bitirmek 100% 'doğru ecekti genişletmeyi' vermek. Biz de ayarlayabiliriz Opaklık: 1 Son ana kareye doğru, böylece şekil aynı anda kaybolur. 

 @keyframes rectfade {
{
Genişlik:% 1;
}
için {
Genişlik:% 100;
Opaklık: 1;
}
}

11. Metin animasyonu

Metnimizde bir çizgi çizme etkisi yaratacağız, sonra solmaya bir dolgu kullanın. Metin animasyonunu ayarlamak için textdraw dört saniye süreyle. Kübik Bezier, bu adımda biraz farklı bir hareket hızını vermek için değiştirildi. 

 path.recttext {
Opaklık: 0;
Animasyon: TextDraw 4S
Kübik-Bezier (.56, -0.04, .32, .7) ileri;
}

12. Başlangıcını geciktirin

Metnimizin sadece dikdörtgenin solunmasını tamamladığından çalışması gerekiyor. Çünkü dikdörtgenin bir saniyelik bir süreye sahip olduğundan, metin animasyonunun başlangıcını o zaman geciktirin. 

 path.recttext {
Opaklık: 0;
Animasyon: TextDraw 4S
Kübik-Bezier (.56, -0.04, .32, .7) ileri;
Animasyon gecikmesi: 1s;
}

13. Çizgi Çizim Emulate

SVG animation

Görüntüyü büyütmek için üstündeki simgeye tıklayın [Resim: Joseph Ford]

Çizgi çizim efektimizi almak için kullanacağız. inme çizgisi ve İnme-dashoffset parametreler. Değerleriniz, kullandığınız SVG'ye bağlı olarak benimkiyle farklı olacaktır. Değerinizi bulmak için, tercih ettiğiniz geliştirici araçlarını kullanın ve artış inme çizgisi dan 0 Tüm şekil bir vuruşla kaplanıncaya kadar. 

 path.recttext {
Opaklık: 0;
İnme-Dasharray: 735;
Animasyon: TextDraw 4S
Kübik-Bezier (.56, -0.04, .32, .7) ileri;
Animasyon gecikmesi: 1s;
}

14. İlk satır çizim anahtar çerçevesi

Şimdi, tüm metin yolunu kapsayan çok büyük bir vuruşumuz var, etkili bir şekilde itmek için kendi uzunluğuyla ofset verelim. Kullanma İnme-dashoffset aynı değer için dasharray yapmalı. Bunu ilk anahtar çerçevemizde ayarlayalım. Ayrıca şeklin şeffaf doldurmasını ve zaten olmadığı takdirde vuruşları beyaza koyacağız. 

 0% {
Doldur: RGB (255, 255, 255, 0);
İnme: #fff;
İnme-DashOffset: 800;
Opaklık: 1;
}

15. Çizgileri çizin

Orta anahtarlıkımızda görünür % 40 animasyon yoluyla. Biz getiriyoruz İnme-dashoffset Sıfıra dönün, böylece çizgi tüm yolu kaplar. Çizimin tamamlandıktan sonra, dolgunun yalnızca göründüğünden emin olmak için bu aşamadaki şeffaf dolguyu yeniden ekleyebiliriz. 

% 40 {
İnme-dashoffset: 0;
Doldur: RGB (255, 255, 255, 0.0);
}

16. Şekli doldurun

Animasyonun son bölümünde, şekli beyaz olarak dolduracağız. Son anahtarlık için yapmamız gereken tek şey, doldurma renginin alfa değerini yükseltmektir. Bu, dolgunun etkisiyle solmaya başlar. 

% 100 {
Doldur: RGB (255, 255, 255, 1);
İnme-dashoffset: 0;
Opaklık: 1;
}

generate conference

Bu makale başlangıçta yaratıcı web tasarım dergisinde yayınlandı Web tasarımcısı . Sayı satın al 286 veya abone ol .

Daha fazla oku:

  • CSS ile SVG filtreleri ekleyin
  • CSS şekilleri ile nasıl tasarlanır: bir giriş
  • CSS ile Akıllı Metin Etkileri Nasıl Kod Yapılır

Nasıl Yapılır - En Popüler Makaleler

Canlı Depolama Nasıl Yaratıcı Olarak Kullanımı

Nasıl Yapılır Jan 29, 2026

(Resim Kredi: Pixabay'den Jan Vašek) Neden bulut depolama kullanacağını bilmeniz gerekiyor? Peki bulut depolama a..

Yaşam çizimlerinize enerji nasıl eklenir

Nasıl Yapılır Jan 29, 2026

(Görüntü Kredi: Patrick J Jones) Bu eğitimde, yaşam çizimlerime enerji eklemek için sanatsal sevginin, bağlı..

Express.js ile başlayın

Nasıl Yapılır Jan 29, 2026

NODE.JS ile tarayıcı yüzü oluşturma uygulamaları sıkıcı olur. Express.js bir Javascript çerçeve..

Afinity Tasarımcısı: İhracat Kişi Nasıl Kullanılır

Nasıl Yapılır Jan 29, 2026

Afinite Tasarımcısı popüler bir vektör düzenleme aracıdır. Mac ve Windows sürümlerinin yanı sıra, Serif son zamanlard..

Hız Zbrush'ta bir yaratığı şekillendirdi

Nasıl Yapılır Jan 29, 2026

Zbrush'ta yaratıkları kavramlarken, fikrinizi bir GREYSCALE, UNSISSED parça olarak sunmak 3d sanat Bir izleyici..

Sass ile nasıl başlanacağı

Nasıl Yapılır Jan 29, 2026

Sos Diğer programlama dillerinden birçok özelliği, işlevler, değişkenler ve ilmekler gibi CSS'ye sunan güçl�..

Kürklü Pet Portresi Boya

Nasıl Yapılır Jan 29, 2026

Bitmiş kedi portre Evcil hayvan boyama ve hayvanlar çizim çok eğlenceli olabilir. Yapıtın..

Oyun tasarımı için bir uzay gemisi modelleme

Nasıl Yapılır Jan 29, 2026

İle Kırık alan Nedir? - Oynanması için ücretsiz bir takım savaş oyunu - Gemiler ve yetenekleri gösterinin..

Kategoriler