[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-hover-ve-gecisler-5-temel-css-animasyon-ornegi":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},39302,"Hover ve geçişler: 5 temel CSS animasyon örneği","Bu yazıda, hover ve geçiş temelli 5 temel CSS animasyon örneği, her biri için kısa kod parçacıkları ve erişilebilirlik ile performans ipuçları bulacaksınız.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>Hover ve geçiş animasyonları, kullanıcı etkileşimlerine görsel geri bildirim vererek arayüzleri daha sezgisel hale getirir. Basit bir renk değişiminden ölçeklendirme veya 3D döndürmeye kadar pek çok efekt mümkün. Aşağıdaki 5 örnek, küçük bileşimler için uygulaması kolay çözümler sunar; her örnekte temel HTML, ilgili CSS ve erişilebilirlik/performans notları yer alır. Bu alandaki örnekler ve uygulama ipuçları için bakabilirsiniz: \u003Ca href=\"https://cssauthor.com/css-hover-effects/\">CSSAuthor\u003C/a>, \u003Ca href=\"https://code2care.org/tutorial/25-css-hover-effect-examples/\">Code2Care\u003C/a> ve \u003Ca href=\"https://ianlunn.github.io/Hover/\">Hover.css\u003C/a>.\u003C/p>\n\n\u003Ch2>Neden hover ve geçişler kullanılır?\u003C/h2>\n\u003Cp>Hover ve transition kullanmanın temel amaçları şunlardır:\u003C/p>\n\u003Cul>\n  \u003Cli>Kullanıcı etkileşimini artırmak ve dikkat çekmek.\u003C/li>\n  \u003Cli>Bir öğenin tıklanabilir veya odaklanabilir olduğunu belirtmek.\u003C/li>\n  \u003Cli>Arayüzün duyarlılığını ve “canlı” hissini iyileştirmek.\u003C/li>\n\u003C/ul>\n\u003Cp>Bu tekniklerin nasıl ve ne zaman kullanılacağıyla ilgili pratik tavsiyeleri kaynaklarda bulabilirsiniz; özellikle mikro etkileşimler için süre ve hız eğrilerinin seçimi önemlidir (\u003Ca href=\"https://cssauthor.com/css-hover-effects/\">CSSAuthor\u003C/a>).\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>5 Temel Örnek (her örnek: amaç, HTML, CSS, kısa notlar)\u003C/h2>\n\n\u003Ch3>1) Basit renk geçişi (background-color)\u003C/h3>\n\u003Cp>\u003Cstrong>Hedef:\u003C/strong> Düğme veya bağlantı üzerinde yumuşak renk değişimiyle geri bildirim vermek.\u003C/p>\n\u003Cp>\u003Cstrong>HTML:\u003C/strong> <a class=\"btn\">Buton</a>\u003C/p>\n\u003Cp>\u003Cstrong>CSS:\u003C/strong>\u003Cbr>\n.btn { display:inline-block; padding:0.6rem 1rem; background:#007BFF; color:#fff; border-radius:6px; text-decoration:none; transition: background-color 200ms ease; }\u003Cbr>\n.btn:hover, .btn:focus-visible { background-color:#0056b3; }\u003C/p>\n\u003Cp>\u003Cstrong>Notlar:\u003C/strong> background-color geçişleri genellikle performans açısından hafiftir. \u003Cstrong>:focus-visible\u003C/strong> ekleyerek klavye kullanıcılarını unutmayın. Kullanıcı tercihlerini saygıyla karşılamak için daha sonra \u003Cem>prefers-reduced-motion\u003C/em> kuralını eklemelisiniz.\u003C/p>\n\n\u003Ch3>2) Ölçeklendirme (transform: scale) — kart etkileşimi\u003C/h3>\n\u003Cp>\u003Cstrong>Hedef:\u003C/strong> Kart veya ürün kutusunda hafif yükselme ve büyüme hissi ile vurgu.\u003C/p>\n\u003Cp>\u003Cstrong>HTML:\u003C/strong> <div class=\"card\">İçerik</div>\u003C/p>\n\u003Cp>\u003Cstrong>CSS:\u003C/strong>\u003Cbr>\n.card { transition: transform 250ms cubic-bezier(.2,.7,.3,1), box-shadow 250ms; transform-origin:center; }\u003Cbr>\n.card:hover, .card:focus-within { transform: translateY(-6px) scale(1.03); box-shadow:0 12px 30px rgba(0,0,0,0.12); }\u003C/p>\n\u003Cp>\u003Cstrong>Notlar:\u003C/strong> Transform ve opacity gibi GPU hızlandırmalı özellikleri tercih edin; bu, layout değişikliğini azaltır ve performansı iyileştirir. Mobilde hover davranışı olmadığını unutmayın — dokunmatik cihazlar için \u003Cstrong>:active\u003C/strong> veya JS ile sınıf ekleme alternatifleri düşünün.\u003C/p>\n\n\u003Ch3>3) 3D flip (rotateY) — kart çevirme\u003C/h3>\n\u003Cp>\u003Cstrong>Hedef:\u003C/strong> Daha etkileyici, içerik değişimini gösteren kart animasyonu.\u003C/p>\n\u003Cp>\u003Cstrong>HTML (kısa gösterim):\u003C/strong> <div class=\"flip-card\"><div class=\"flip-card__inner\"><div class=\"flip-card__front\">Ön</div><div class=\"flip-card__back\">Arka</div></div></div>\u003C/p>\n\u003Cp>\u003Cstrong>CSS:\u003C/strong>\u003Cbr>\n.flip-card { perspective:1000px; }\u003Cbr>\n.flip-card__inner { transition: transform 600ms; transform-style:preserve-3d; }\u003Cbr>\n.flip-card:hover .flip-card__inner, .flip-card:focus-within .flip-card__inner { transform: rotateY(180deg); }\u003Cbr>\n.flip-card__front, .flip-card__back { backface-visibility:hidden; position:absolute; top:0; left:0; width:100%; height:100%; }\u003C/p>\n\u003Cp>\u003Cstrong>Notlar:\u003C/strong> 3D efektler için \u003Cem>perspective\u003C/em>, \u003Cem>transform-style\u003C/em> ve \u003Cem>backface-visibility\u003C/em> kullanılır. CSS-Tricks’te 3D ve maskeleme teknikleri hakkında daha fazla örnek bulabilirsiniz (\u003Ca href=\"https://css-tricks.com/css-hover-effects-background-masks-3d/\">CSS-Tricks\u003C/a>).\u003C/p>\n\n\u003Ch3>4) Alt çizgi açılma (pseudo-element reveal)\u003C/h3>\n\u003Cp>\u003Cstrong>Hedef:\u003C/strong> Metin bağlantısı veya menü öğesi altında akıcı bir çizgi animasyonuyla vurgu.\u003C/p>\n\u003Cp>\u003Cstrong>HTML:\u003C/strong> <a class=\"link\" href=\"#\">Menü</a>\u003C/p>\n\u003Cp>\u003Cstrong>CSS:\u003C/strong>\u003Cbr>\n.link { position:relative; text-decoration:none; }\u003Cbr>\n.link::after { content:\"\"; position:absolute; left:0; bottom:-4px; height:2px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition: transform 300ms ease; }\u003Cbr>\n.link:hover::after, .link:focus-visible::after { transform:scaleX(1); }\u003C/p>\n\u003Cp>\u003Cstrong>Notlar:\u003C/strong> Pseudo-element'ler (::after/::before) ile yapılabilen bu teknik, temiz ve hafif bir görsel etki verir. Renkleri \u003Cstrong>currentColor\u003C/strong> ile bağlamak temayı desteklemeyi kolaylaştırır.\u003C/p>\n\n\u003Ch3>5) Keyframes ile pulse veya arka plan kaydırma\u003C/h3>\n\u003Cp>\u003Cstrong>Hedef:\u003C/strong> İkonlar veya küçük öğeler için kısa, dikkat çekici animasyonlar.\u003C/p>\n\u003Cp>\u003Cstrong>CSS:\u003C/strong>\u003Cbr>\n@keyframes pulse { 0% { transform:scale(1);} 50% { transform:scale(1.08);} 100% { transform:scale(1);} }\u003Cbr>\n.icon:hover { animation: pulse 700ms ease-in-out; }\u003C/p>\n\u003Cp>\u003Cstrong>Alternatif:\u003C/strong> Arka plan maskeleri veya kaydırmalı gradyanlarla yapılan reveal efektleri daha sofistike görünümler yaratır; bu tür teknikler ve arka plan klipleri için \u003Ca href=\"https://css-tricks.com/css-hover-effects-background-masks-3d/\">CSS-Tricks\u003C/a> iyi bir kaynak sağlar.\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>Erişilebilirlik ve duyarlılık (accessibility & responsiveness)\u003C/h2>\n\u003Cp>Animasyonları herkes için erişilebilir kılmak önemli. Basit uygulamalar:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>:focus-visible\u003C/strong> ile klavye odak durumlarını destekleyin.\u003C/li>\n  \u003Cli>Klavye ile navigasyonun aynı görsel geri bildirimi almasını sağlayın.\u003C/li>\n  \u003Cli>Kullanıcının hareket tercihlerini saygıyla karşılayın: \u003Cem>prefers-reduced-motion\u003C/em> kullanın.\u003C/li>\n\u003C/ul>\n\u003Cp>Örnek prefers-reduced-motion kuralı:\u003Cbr>\n@media (prefers-reduced-motion: reduce) { .btn, .card, .icon { transition: none !important; animation: none !important; } }\u003C/p>\n\n\u003Ch2>En iyi uygulamalar ve performans ipuçları\u003C/h2>\n\u003Cul>\n  \u003Cli>Animasyon için mümkün olduğunca \u003Cstrong>transform\u003C/strong> ve \u003Cstrong>opacity\u003C/strong> kullanın; bunlar genellikle daha az layout etkiler.\u003C/li>\n  \u003Cli>Mikro etkileşimler için 150–350ms arası süreler uygun; daha uzun animasyonlar dikkat dağıtabilir. Süre ve hız eğrisini dikkatle seçin (\u003Ca href=\"https://cssauthor.com/css-hover-effects/\">CSSAuthor\u003C/a>).\u003C/li>\n  \u003Cli>3D veya maskeler gibi daha karmaşık efektleri gerektiğinde kullanın; aşırı kullanım dikkat dağıtabilir (\u003Ca href=\"https://css-tricks.com/css-hover-effects-background-masks-3d/\">CSS-Tricks\u003C/a>).\u003C/li>\n  \u003Cli>\u003Cstrong>Test\u003C/strong>: klavye navigasyonu, dokunmatik cihazlar ve reduced-motion ayarlı sistemlerde kontrol edin.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Kontrol listesi: Yayına almadan önce\u003C/h2>\n\u003Col>\n  \u003Cli>Tüm hover efektleri klavye ile çalışıyor mu? (Tab/Enter/Space)\u003C/li>\n  \u003Cli>prefers-reduced-motion ile animasyonlar devre dışı kalıyor mu?\u003C/li>\n  \u003Cli>Performans testleri yapıldı mı (basit Chrome DevTools incelemesi)?\u003C/li>\n  \u003Cli>Renk kontrastı ve odak göstergeleri uygun mu?\u003C/li>\n\u003C/ol>\n\n\u003Chr>\n\n\u003Ch2>Kaynaklar ve ileri okuma\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://cssauthor.com/css-hover-effects/\">CSSAuthor — CSS Hover Effects: 40+ Code Examples & Tutorials\u003C/a> — geniş örnek seti ve uygulama notları.\u003C/li>\n  \u003Cli>\u003Ca href=\"https://ianlunn.github.io/Hover/\">Hover.css\u003C/a> — Ian Lunn tarafından hazırlanan, kullanıma hazır CSS hover efektleri koleksiyonu.\u003C/li>\n  \u003Cli>\u003Ca href=\"https://css-tricks.com/css-hover-effects-background-masks-3d/\">CSS-Tricks — Background clipping, masks and 3D hover effects\u003C/a> — sofistike efektler ve teknik ayrıntılar.\u003C/li>\n\u003C/ul>\n\n\u003Cp>Bu örneklerle başlayın, ardından projeye göre süreleri ve easing değerlerini uyarlayın. Daha fazla örnek için Hover.css koleksiyonunu inceleyebilir veya hazır örnekleri kendi bileşenlerinize entegre edebilirsiniz (\u003Ca href=\"https://ianlunn.github.io/Hover/\">Hover.css\u003C/a>, \u003Ca href=\"https://code2care.org/tutorial/25-css-hover-effect-examples/\">Code2Care\u003C/a>).\u003C/p>","CSS Animasyon Mini Örnekleri — 5 Temel Hover ve Geçiş Örneği","Bu kılavuz, hover ve geçiş temelli 5 pratik CSS animasyon örneği, uygulanabilir kod parçacıkları ve erişilebilirlik ile performans ipuçları sunar.","CSS Animasyon Mini Örnekleri, css transition örnekleri, hover animasyonu örnek, keyframes css örnekleri, CSS hover efektleri, CSS transitions","hover-ve-gecisler-5-temel-css-animasyon-ornegi","2026-10-22T10:41:48.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/6d1c5127874e654de3b26a12e33f4df5.jpg","/media/blog/6d1c5127874e654de3b26a12e33f4df5_thumb.jpg","/media/blog/6d1c5127874e654de3b26a12e33f4df5.webp","/media/blog/6d1c5127874e654de3b26a12e33f4df5_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,840,0,"5 dk okuma süresi","/blog/css-animasyon-mini-ornekleri/hover-ve-gecisler-5-temel-css-animasyon-ornegi",[],["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/6d1c5127874e654de3b26a12e33f4df5.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/hover-ve-gecisler-5-temel-css-animasyon-ornegi",{"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/hover-ve-gecisler-5-temel-css-animasyon-ornegi",["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":114,"name":7,"item":65},4]