[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-basit-css-animasyon-ornekleri-hover-transition-ve-keyframes":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},41430,"Basit CSS Animasyon Örnekleri: Hover, Transition ve Keyframes","Bu makalede CSS animasyonlarına kısa bir giriş, :hover ve transition ile etkileşimli örnekler, @keyframes ile zamanlamalı animasyonlar ve uygulama kontrol listeleri yer alır. Adım adım kod parçaları ile temel kullanım gösterilmektedir.","\u003Ch2>Basit CSS Animasyon Örnekleri: Hover, Transition ve Keyframes\u003C/h2>\n\u003Cp>Bu yazı, \u003Cstrong>CSS Animasyon Mini Örnekleri\u003C/strong> arayan geliştiriciler için pratik ve doğrudan uygulanabilir örnekler sunar. Aşağıda :hover ile etkileşim, transition ile yumuşak geçişler ve @keyframes ile daha karmaşık zamanlamalı animasyonlar göreceksiniz. Her örnek kısa açıklama, adım adım kod ve hangi ayarın ne işe yaradığıyla birlikte verilecektir.\u003C/p>\n\n\u003Ch3>Temel kavramlar (kısa)\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Cstrong>CSS animasyonları\u003C/strong>: HTML öğelerinin görsel özelliklerini zaman içinde değiştirmeye yarar; daha fazla bilgi için MDN notlarına bakın (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations\">MDN: CSS Animations\u003C/a>) \u003Cem>(kaynak: turn0search3)\u003C/em>.\u003C/li>\n  \u003Cli>\u003Cstrong>:hover\u003C/strong>: Fare bir öğenin üzerine geldiğinde uygulanan pseudo-class. Mobil cihazlarda farklı davranışlar olabilir; klavye ile erişim için :focus eklemeyi düşünün (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:hover\">MDN: :hover\u003C/a>) \u003Cem>(kaynak: turn0search7)\u003C/em>.\u003C/li>\n  \u003Cli>\u003Cstrong>transition\u003C/strong>: Bir CSS özelliğinin bir değerden diğerine zaman içinde yumuşakça geçmesini sağlar. Özellik, süre, zamanlama fonksiyonu ve gecikme parametreleri vardır (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transition\">MDN: transition\u003C/a>) \u003Cem>(kaynak: turn0search8)\u003C/em>.\u003C/li>\n  \u003Cli>\u003Cstrong>@keyframes\u003C/strong>: Bir animasyonun ara adımlarını (keyframes) tanımlayarak daha kontrollü hareketler oluşturmayı sağlar; \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/%40keyframes\">MDN: @keyframes\u003C/a> sayfası faydalıdır \u003Cem>(kaynak: turn0search0)\u003C/em>.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>1) Basit :hover + transition — Arka plan rengi değişimi\u003C/h3>\n\u003Cp>Aşağıdaki örnek, bir düğme üzerine gelindiğinde arka plan renginin yumuşakça değişmesini gösterir. Bu tip etkileşimler, kullanıcıya geri bildirim verir ve UI öğelerini daha canlı gösterir.\u003C/p>\n\u003Ch4>HTML\u003C/h4>\n\u003Cp>\u003Cstrong>HTML:\u003C/strong>\u003Cbr><button class=\"btn\">Hover me</button>\u003C/p>\n\u003Ch4>CSS\u003C/h4>\n\u003Cp>\u003Cstrong>CSS:\u003C/strong>\u003Cbr>.btn {\u003Cbr>  background-color: #3498db;\u003Cbr>  color: #fff;\u003Cbr>  padding: 10px 18px;\u003Cbr>  border: none;\u003Cbr>  border-radius: 4px;\u003Cbr>  cursor: pointer;\u003Cbr>  transition: background-color 200ms ease, transform 200ms ease;\u003Cbr>}\u003Cbr>.btn:hover, .btn:focus {\u003Cbr>  background-color: #2ecc71;\u003Cbr>  transform: translateY(-3px);\u003Cbr>}\u003C/p>\n\u003Cp>Açıklama: \u003Cstrong>transition\u003C/strong> ile hangi özelliğin, ne kadar sürede ve hangi zamanlama fonksiyonuyla değişeceğini belirtiyoruz. :focus eklenmesi klavye erişimi sağlayan kullanıcılar için aynı görsel geri bildirimi verir.\u003C/p>\n\n\u003Ch3>2) Hover efektleri: ölçeklendirme ve gölge\u003C/h3>\n\u003Cp>Hover efektleri yalnızca renk değiştirmekten ibaret değildir. Aşağıdaki örnek, kart benzeri öğelerin üzerine gelindiğinde hafifçe büyümesini ve gölge almasını gösterir.\u003C/p>\n\u003Ch4>HTML\u003C/h4>\n\u003Cp>\u003Cstrong>HTML:\u003C/strong>\u003Cbr><div class=\"card\">Kart içeriği</div>\u003C/p>\n\u003Ch4>CSS\u003C/h4>\n\u003Cp>\u003Cstrong>CSS:\u003C/strong>\u003Cbr>.card {\u003Cbr>  background: #fff;\u003Cbr>  padding: 16px;\u003Cbr>  border-radius: 8px;\u003Cbr>  transition: transform 180ms ease, box-shadow 180ms ease;\u003Cbr>  box-shadow: 0 1px 3px rgba(0,0,0,0.08);\u003Cbr>}\u003Cbr>.card:hover, .card:focus {\u003Cbr>  transform: scale(1.03);\u003Cbr>  box-shadow: 0 6px 20px rgba(0,0,0,0.12);\u003Cbr>}\u003C/p>\n\u003Cp>Not: Görsel performans için transform ve opacity gibi özellikler genellikle layout'u yeniden hesaplamadan çalıştığı için tercih edilir. Hangi özelliklerin animasyonla uyumlu olduğunu MDN'in transition sayfasında bulabilirsiniz (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transition\">MDN: transition\u003C/a>) \u003Cem>(kaynak: turn0search8)\u003C/em>.\u003C/p>\n\n\u003Ch3>3) @keyframes ile zamanlamalı animasyon: slide-in\u003C/h3>\n\u003Cp>@keyframes, animasyonun başlangıç, ara ve bitiş durumlarını tanımlamanızı sağlar. Aşağıda bir öğeyi alttan yukarı doğru kaydırarak görünür hale getiren basit bir örnek var.\u003C/p>\n\u003Ch4>CSS\u003C/h4>\n\u003Cp>\u003Cstrong>CSS (@keyframes):\u003C/strong>\u003Cbr>@keyframes slideIn {\u003Cbr>  from { opacity: 0; transform: translateY(12px); }\u003Cbr>  to   { opacity: 1; transform: translateY(0); }\u003Cbr>}\u003Cbr>.slide-in {\u003Cbr>  animation: slideIn 600ms cubic-bezier(.22,.9,.32,1) both;\u003Cbr>}\u003C/p>\n\u003Cp>Açıklama: \u003Cstrong>animation\u003C/strong> kısa yazımı ile animasyon adı, süresi, zamanlama fonksiyonu ve doluluk davranışı (fill-mode) kontrol edilir. Bu örnekte \u003Cem>both\u003C/em> kullanımı, animasyon bitiminde son durumun korunmasını sağlar.\u003C/p>\n\n\u003Ch3>4) Sürekli dönen ikon (infinite animation)\u003C/h3>\n\u003Cp>Tekrarlayan animasyonlar için \u003Ccode>infinite\u003C/code> kullanabilirsiniz. (Kod etiketlerini göstermekteyiz fakat lütfen sayfanızda \u003Cstrong>@keyframes\u003C/strong> tanımını ayrı bir CSS dosyasında tutun.)\u003C/p>\n\u003Ch4>CSS\u003C/h4>\n\u003Cp>\u003Cstrong>CSS:\u003C/strong>\u003Cbr>@keyframes spin { to { transform: rotate(360deg); } }\u003Cbr>.spinner {\u003Cbr>  display: inline-block;\u003Cbr>  animation: spin 1s linear infinite;\u003Cbr>}\u003C/p>\n\u003Cp>Bu kullanım, örneğin bir yükleme göstergesi (loading) için uygundur. Sürekli animasyonlar dikkat gerektirir; gereksiz karmaşık veya uzun süreli animasyonlar kullanıcıyı yorar.\u003C/p>\n\n\u003Ch3>Erişilebilirlik ve tercih edilen hareket (reduced motion)\u003C/h3>\n\u003Cp>Animasyonları eklerken erişilebilirliği düşünün. Bazı kullanıcılar hareketli içeriklere karşı hassas olabilir. Bu nedenle işletim sistemi düzeyindeki hareket azaltma tercihlerini okumak ve bu isteğe saygı göstermek iyi bir uygulamadır:\u003C/p>\n\u003Ch4>CSS (tercihleri dikkate alma)\u003C/h4>\n\u003Cp>\u003Cstrong>CSS:\u003C/strong>\u003Cbr>@media (prefers-reduced-motion: reduce) {\u003Cbr>  .slide-in, .spinner, .card, .btn {\u003Cbr>    animation: none !important;\u003Cbr>    transition: none !important;\u003Cbr>  }\u003Cbr>}\u003C/p>\n\u003Cp>Bu kural, kullanıcının \u003Cem>reduced motion\u003C/em> tercihini gördüğünde animasyonları devre dışı bırakır veya sadeleştirir.\u003C/p>\n\n\u003Ch3>Hızlı kontrol listesi: uygulamaya geçmeden önce\u003C/h3>\n\u003Cul>\n  \u003Cli>Tasarım için kısa süreler kullanın (genelde 150–600ms arası uygundur, ihtiyaca göre ayarlayın).\u003C/li>\n  \u003Cli>Performans için transform ve opacity tercih edin; layout-affecting özellikleri animasyonlamaktan kaçının.\u003C/li>\n  \u003Cli>Klavyeyle erişim için \u003Cstrong>:focus\u003C/strong> stillerini ekleyin.\u003C/li>\n  \u003Cli>Erişilebilirlik için \u003Cstrong>prefers-reduced-motion\u003C/strong> kontrolü ekleyin.\u003C/li>\n  \u003Cli>Tarayıcı testleri yapın ve gerektiğinde vendor-prefix değil modern özellikleri kullandığınızdan emin olun.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Deneme ve hata giderme (pratik ipuçları)\u003C/h3>\n\u003Cul>\n  \u003Cli>Eğer animasyon görünmüyorsa: animasyon adı ile @keyframes adının aynı olduğundan emin olun.\u003C/li>\n  \u003Cli>Transition çalışmıyorsa: geçiş yaptığınız özelliğin gerçekten animasyonlanabilir olup olmadığını kontrol edin; tüm özellikler transition ile değiştirilemez (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transition\">MDN: transition\u003C/a>) \u003Cem>(kaynak: turn0search8)\u003C/em>.\u003C/li>\n  \u003Cli>Performans sorunları varsa: DevTools > Performance kaydı alarak hangi işlemlerin yeniden düzenlemeye (reflow) neden olduğunu inceleyin.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\u003Ch3>Özet ve sonraki adımlar\u003C/h3>\n\u003Cp>Bu rehberde \u003Cstrong>CSS animasyon mini örnekleri\u003C/strong> olarak :hover + transition ve @keyframes kullanarak nasıl etkileşimli ve zamanlamalı animasyonlar oluşturacağınızı gösterdik. Örnekleri kopyalayıp kendi projenize yapıştırarak başlayın; sonra süreleri, zamanlama fonksiyonlarını ve anahtar kareleri (keyframes) ihtiyaca göre ayarlayın. Daha ayrıntılı teknik referans ve enumerasyonlar için MDN dökümanlarını inceleyin: CSS Animations, :hover, transition ve @keyframes sayfaları faydalıdır (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations\">turn0search3\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:hover\">turn0search7\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transition\">turn0search8\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/%40keyframes\">turn0search0\u003C/a>).\u003C/p>\n","Basit CSS Animasyon Mini Örnekleri — Hover, Transition ve @-","Bu rehber, CSS Animasyon Mini Örnekleri başlığı altında :hover, transition ve @keyframes ile kısa ve uygulanabilir animasyon örnekleri gösterir. Adım adım kod, ","CSS Animasyon Mini Örnekleri, css animasyon örnekleri, hover efektleri, transition keyframes, CSS animasyon","basit-css-animasyon-ornekleri-hover-transition-ve-keyframes","2026-11-13T11:51:24.000Z",{"id":16,"title":17,"slug":18},212,"CSS Animasyon Mini Örnekleri","css-animasyon-mini-ornekleri",{"id":20,"name":21,"nickname":22,"slug":23},93,"Onur Tekin","CodeCraftsman","onur-tekin","/media/blog/d8243a9b780e13a4478eefd1ec52ef1e.jpg","/media/blog/d8243a9b780e13a4478eefd1ec52ef1e_thumb.jpg","/media/blog/d8243a9b780e13a4478eefd1ec52ef1e.webp","/media/blog/d8243a9b780e13a4478eefd1ec52ef1e_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,760,0,"4 dk okuma süresi","/blog/css-animasyon-mini-ornekleri/basit-css-animasyon-ornekleri-hover-transition-ve-keyframes",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/d8243a9b780e13a4478eefd1ec52ef1e.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/basit-css-animasyon-ornekleri-hover-transition-ve-keyframes",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/basit-css-animasyon-ornekleri-hover-transition-ve-keyframes",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/onur-tekin",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,113],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":111,"name":17,"item":112},3,"https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri",{"@type":102,"position":30,"name":7,"item":65}]