[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-css-animasyonlari-hover-efektleri-ve-temel-keyframes-ornekleri":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},24722,"CSS animasyonları: hover efektleri ve temel keyframes örnekleri","Bu rehberde kısa ve uygulanabilir CSS animasyon örnekleri sunuluyor; hover efektleri, keyframes temelleri, performans ve erişilebilirlik ipuçlarına odaklanıyor.","\u003Ch2>CSS animasyonları: hover efektleri ve temel keyframes örnekleri\u003C/h2>\n\u003Cp>CSS animasyonları, bir öğenin görsel özelliklerini zaman içinde değiştirmek için kullanılır. Basit durumlar için \u003Cstrong>transition\u003C/strong>, daha karmaşık hareketler için ise \u003Cstrong>@keyframes\u003C/strong> ile tanımlanan animasyonlar uygundur. Keyframes ile animasyonun ara adımlarını ve zamanlamasını belirleyebilirsiniz; bu konuda MDN detaylı teknik bilgi sağlar (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-name\">MDN - animation-name\u003C/a>).\u003C/p>\n\n\u003Ch3>transition ile hover efektleri: ne zaman kullanmalı?\u003C/h3>\n\u003Cp>\u003Cstrong>Transition\u003C/strong>, bir CSS özelliğinin iki durum arasındaki değişimini yumuşatmak için idealdir. Basit hover efektleri (renk, opaklık, transform gibi) için transition kısa, performans dostu ve anlaşılır bir seçenektir.\u003C/p>\n\n\u003Ch4>Örnek: buton yükselme ve renk değişimi\u003C/h4>\n\u003Cblockquote>\n\u003Cdiv>/* HTML */\u003Cbr><button class=\"btn\">Hover</button>\u003C/div>\n\u003Cbr>\n\u003Cdiv>/* CSS */\u003Cbr>.btn {\u003Cbr>  display: inline-block;\u003Cbr>  padding: 10px 16px;\u003Cbr>  background: #0b5fff;\u003Cbr>  color: #fff;\u003Cbr>  border-radius: 6px;\u003Cbr>  transition: transform 200ms ease, background-color 200ms ease;\u003Cbr>}\u003Cbr>.btn:hover {\u003Cbr>  transform: translateY(-4px) scale(1.03);\u003Cbr>  background-color: #084fe0;\u003Cbr>}\u003C/div>\n\u003C/blockquote>\n\n\u003Cp>Bu örnekte sadece \u003Cem>transform\u003C/em> ve \u003Cem>background-color\u003C/em> animasyonu uygulanıyor; böylece gereksiz layout yeniden hesaplamaları azaltılır.\u003C/p>\n\n\u003Ch3>keyframes: ara adımlar ve daha karmaşık hareketler\u003C/h3>\n\u003Cp>@keyframes kullanarak animasyon başlangıç, ara ve bitiş noktalarını tanımlarsınız. Aşağıda üç temel örnek var.\u003C/p>\n\n\u003Ch4>Pulse (nabız) animasyonu\u003C/h4>\n\u003Cblockquote>\n\u003Cdiv>@keyframes pulse {\u003Cbr>  0% { transform: scale(1); }\u003Cbr>  50% { transform: scale(1.05); }\u003Cbr>  100% { transform: scale(1); }\u003Cbr>}\u003Cbr>.pulse { animation: pulse 1.2s ease-in-out infinite; }\u003C/div>\n\u003C/blockquote>\n\n\u003Ch4>Slide-in (giriş) animasyonu\u003C/h4>\n\u003Cblockquote>\n\u003Cdiv>@keyframes slideIn {\u003Cbr>  from { transform: translateX(-100%); opacity: 0; }\u003Cbr>  to   { transform: translateX(0); opacity: 1; }\u003Cbr>}\u003Cbr>.slide-in { animation: slideIn 400ms ease forwards; }\u003C/div>\n\u003C/blockquote>\n\n\u003Ch4>Rotate-in (dönerek gelen) animasyonu\u003C/h4>\n\u003Cblockquote>\n\u003Cdiv>@keyframes rotateIn {\u003Cbr>  0% { transform: rotate(-15deg); opacity: 0; }\u003Cbr>  100% { transform: rotate(0); opacity: 1; }\u003Cbr>}\u003Cbr>.rotate-in { animation: rotateIn 350ms cubic-bezier(.2,.8,.2,1) forwards; }\u003C/div>\n\u003C/blockquote>\n\n\u003Ch3>Hover ile keyframes tetikleme: dikkat edilecek noktalar\u003C/h3>\n\u003Cp>Keyframes tabanlı bir animasyonu doğrudan :hover ile başlatmak yaygındır. Ancak bazı durumlarda animasyon her hover’da yeniden başlatıldığında görsel yanıp sönme (flicker) veya beklenmeyen sıçramalar görülebilir; bu tip davranışlar için geliştiriciler farklı çözümler tartışmıştır (örnekler ve çözümler için bakınız: \u003Ca href=\"https://stackoverflow.com/questions/45158916/css-animation-with-keyframes-and-hover\">Stack Overflow örneği\u003C/a>, \u003Ca href=\"https://stackoverflow.com/questions/48873671/css-flicker-animation-with-hover\">flicker tartışması\u003C/a>).\u003C/p>\n\u003Cp>Yaygın çözümler:\u003C/p>\n\u003Cul>\n  \u003Cli>animation-fill-mode ayarları ile animasyonun ilk ve son durumlarını belirlemek (ör. \u003Cem>forwards\u003C/em> veya \u003Cem>both\u003C/em>).\u003C/li>\n  \u003Cli>Tek seferlik oynatma için \u003Cem>animation-iteration-count: 1\u003C/em> kullanmak.\u003C/li>\n  \u003Cli>Basit hover efektleri için mümkünse transition kullanmak; transition daha öngörülebilir davranır.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Performans ipuçları ve en iyi uygulamalar\u003C/h3>\n\u003Cp>Animasyon performansını iyileştirmek için genel kural, yalnızca kompozit aşamasında işlenebilen özellikleri animasyonlamak; örneğin \u003Cstrong>transform\u003C/strong> ve \u003Cstrong>opacity\u003C/strong> genellikle daha az maliyetlidir. Layout veya repaint gerektiren özellikleri (ör. width, height, margin) sık sık animasyonlamak maliyetli olabilir. Bu tür en iyi uygulamalar MDN'de de önerilmektedir (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-name\">MDN animasyon belgeleri\u003C/a>).\u003C/p>\n\u003Cp>Ek olarak, daha ince kontrol gerektiğinde \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-composition\">animation-composition\u003C/a> gibi modern özellikleri inceleyebilirsiniz; bu özellik animasyonun nasıl birleştirileceğini kontrol eder, fakat tarayıcı desteğine dikkat etmek gerekir.\u003C/p>\n\u003Cul>\n  \u003Cli>Öncelik verin: Sık görülen UI hareketlerini optimize edin (buton hover, açılır menüler).\u003C/li>\n  \u003Cli>Aynı anda çok sayıda öğeyi animasyonlamak yerine gruplandırma yapın.\u003C/li>\n  \u003Cli>\u003Cstrong>will-change\u003C/strong> kullanırken dikkatli olun; çok fazla öğeye uygularsanız ters etki yapabilir.\u003C/li>\n  \u003Cli>Animasyon süresini makul aralıklarda tutun; gereksiz uzun hareketler kullanıcı deneyimini düşürebilir.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Erişilebilirlik: tercih eden kullanıcılara saygı\u003C/h3>\n\u003Cp>Hareketi rahatsız edici bulan kullanıcılar olabilir. CSS'de \u003Cem>prefers-reduced-motion\u003C/em> medya sorgusu ile bu kullanıcı tercihlerini algılayıp animasyonları azaltabilir veya kapatabilirsiniz. Örnek:\u003C/p>\n\u003Cblockquote>\n\u003Cdiv>@media (prefers-reduced-motion: reduce) {\u003Cbr>  .animated { animation: none !important; transition: none !important; }\u003Cbr>}\u003C/div>\n\u003C/blockquote>\n\u003Cp>Bu yaklaşım, hareket hassasiyeti olan kullanıcıların deneyimini iyileştirir.\u003C/p>\n\n\u003Ch3>Küçük uygulama: hover ile canlanan kart (adım adım)\u003C/h3>\n\u003Cp>Aşağıda hover ile yukarı kalkma, gölge verme ve hafif bir pulse efekti gösteren basit bir kart örneği var. Adımlar: HTML oluştur, temel stilleri ekle, hover için transition ayarla, isteğe bağlı pulse animasyonunu ekle.\u003C/p>\n\u003Cblockquote>\n\u003Cdiv>/* HTML */\u003Cbr><div class=\"card\"><h3>Başlık</h3><p>Kısa açıklama</p></div>\u003C/div>\n\u003Cbr>\n\u003Cdiv>/* CSS */\u003Cbr>.card {\u003Cbr>  width: 280px;\u003Cbr>  padding: 18px;\u003Cbr>  background: #fff;\u003Cbr>  border-radius: 10px;\u003Cbr>  box-shadow: 0 6px 18px rgba(0,0,0,0.08);\u003Cbr>  transition: transform 220ms ease, box-shadow 220ms ease;\u003Cbr>}\u003Cbr>.card:hover {\u003Cbr>  transform: translateY(-8px);\u003Cbr>  box-shadow: 0 18px 36px rgba(0,0,0,0.12);\u003Cbr>}\u003Cbr>/* isteğe bağlı: hover sırasında hafif pulse */\u003Cbr>@keyframes smallPulse { 0%{transform:translateY(-8px) scale(1);}50%{transform:translateY(-9px) scale(1.01);}100%{transform:translateY(-8px) scale(1);} }\u003Cbr>.card:hover { animation: smallPulse 800ms ease forwards; }\u003C/div>\n\u003C/blockquote>\n\u003Cp>Bu örnekte transition ile temel hareket sağlanırken, küçük bir keyframes animasyonu hover süresince ekjerlenebilir. Karmaşıklığı abartmadan, kullanıcı deneyimini destekleyecek küçük dokunuşlar tercih edin.\u003C/p>\n\n\u003Ch3>Test ve hata ayıklama\u003C/h3>\n\u003Cp>Tarayıcı geliştirici araçlarını kullanarak animasyonun hangi adımda ne kadar CPU/paint ürettiğini gözlemleyin. Farklı tarayıcılarda test etmek önemlidir; bazı CSS özellikleri tarayıcılar arasında farklı davranabilir. Eğer hover ile tetiklenen animasyonlarda yanıp sönme görürseniz, yukarıda bahsedilen animation-fill-mode ve iteration-count çözümlerini deneyin veya transition’a dönmeyi değerlendirin (Stack Overflow tartışmaları yol gösterici olabilir).\u003C/p>\n\n\u003Chr>\n\u003Cp>\u003Cstrong>Sonuç\u003C/strong>: Basit hover efektleri için transition çoğu durumda yeterlidir; karmaşık zamanlamalar veya ardışık hareketler için @keyframes kullanın. Performans ve erişilebilirlik en baştan düşünülmeli; MDN dökümantasyonundaki öneriler ve tarayıcı testleri bu süreçte yol gösterir (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-name\">MDN\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-composition\">animation-composition\u003C/a>). Daha ileri sorunlar için Stack Overflow başlıkları pratik çözümler sunuyor.\u003C/p>\n\n\u003Cp>Kaynaklar/okuma için öneriler: MDN animasyon belgeleri ve ilgili Stack Overflow tartışmaları.\u003C/p>","CSS Animasyon Mini Örnekleri — Hover & Keyframes Rehberi","Kısa ve uygulanabilir CSS animasyon örnekleri: transition, transform, :hover ile keyframes kullanımı, performans ve erişilebilirlik ipuçları.","CSS Animasyon Mini Örnekleri, transition, transform, keyframes, hover efektleri, performans ipuçları, prefers-reduced-motion","css-animasyonlari-hover-efektleri-ve-temel-keyframes-ornekleri","2026-04-05T15:32:03.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/6473f8d850f122ff56466364e193635e.jpg","/media/blog/6473f8d850f122ff56466364e193635e_thumb.jpg","/media/blog/6473f8d850f122ff56466364e193635e.webp","/media/blog/6473f8d850f122ff56466364e193635e_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,795,0,"4 dk okuma süresi","/blog/css-animasyon-mini-ornekleri/css-animasyonlari-hover-efektleri-ve-temel-keyframes-ornekleri",[],["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/6473f8d850f122ff56466364e193635e.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/css-animasyonlari-hover-efektleri-ve-temel-keyframes-ornekleri",{"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/css-animasyonlari-hover-efektleri-ve-temel-keyframes-ornekleri",["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}]