[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-basit-css-animasyonlari-hover-transition-ve-keyframe-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},26259,"Basit CSS animasyonları: hover, transition ve keyframe örnekleri","Bu makale, hover, transition ve keyframe ile basit CSS animasyonlarını örnek kodlar ve performans/erişilebilirlik ipuçlarıyla açıklar.","\u003Ch2>Basit CSS animasyonları: hızlı giriş\u003C/h2>\n\u003Cp>CSS ile yapılan animasyonlar, kullanıcı arayüzünü daha akıcı ve anlaşılır hale getirir. Basit etkileşimler için çoğunlukla \u003Cstrong>hover\u003C/strong> (imleçle üstüne gelme), \u003Cstrong>transition\u003C/strong> (özelliklerin yumuşak geçişi) ve \u003Cstrong>@keyframes\u003C/strong> (zaman içinde birden çok durak tanımlama) kullanılır. MDN üzerinde transition ve animasyonlar hakkında teknik ve güncel açıklamalara bakabilirsiniz: \u003Ca href=\"https://developer.mozilla.org/docs/Web/CSS/transition\">transition - MDN\u003C/a> ve \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations\">CSS animations - MDN\u003C/a>.\u003C/p>\n\n\u003Ch3>Ne zaman hangisini kullanmalı?\u003C/h3>\n\u003Cp>Kısa cevap: tek bir stil değişimini (ör. renk, opacity, transform) tetiklemek için \u003Cstrong>transition\u003C/strong>, daha karmaşık zaman çizelgeleri veya birden fazla adımı ardışık çalıştırmak için \u003Cstrong>@keyframes\u003C/strong> tercih edilir. Hover etkileşimleri genellikle transition ile yapılır çünkü basit ve hafiftir.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>1) Hover ile basit animasyon örneği (buton)\u003C/h3>\n\u003Cp>Aşağıdaki örnek, bir bağlantı/buton üzerinde küçük bir büyüme ve renk geçişi uyguluyor. Burada \u003Cstrong>transition\u003C/strong> özelliği kullanılıyor; transition'ın nasıl çalıştığı için MDN belgelerine bakabilirsiniz: \u003Ca href=\"https://developer.mozilla.org/docs/Web/CSS/transition\">https://developer.mozilla.org/docs/Web/CSS/transition\u003C/a>.\u003C/p>\n\u003Col>\n  \u003Cli><a href=\"#\" class=\"btn\">Butona Gel</a>\u003C/li>\n\u003C/ol>\n\u003Cp>CSS (satır satır):\u003C/p>\n\u003Col>\n  \u003Cli>.btn {\u003C/li>\n  \u003Cli>  display: inline-block;\u003C/li>\n  \u003Cli>  padding: 0.6rem 1rem;\u003C/li>\n  \u003Cli>  background: #4C9AFF;\u003C/li>\n  \u003Cli>  color: #fff;\u003C/li>\n  \u003Cli>  border-radius: 6px;\u003C/li>\n  \u003Cli>  text-decoration: none;\u003C/li>\n  \u003Cli>  transition: transform 180ms ease, background-color 180ms ease;\u003C/li>\n  \u003Cli>}\u003C/li>\n  \u003Cli>.btn:hover {\u003C/li>\n  \u003Cli>  transform: translateY(-3px) scale(1.03);\u003C/li>\n  \u003Cli>  background-color: #3a8fe0;\u003C/li>\n  \u003Cli>}\u003C/li>\n\u003C/ol>\n\u003Cp>Açıklama: Burada sadece \u003Cstrong>transform\u003C/strong> ve \u003Cstrong>background-color\u003C/strong> geçişleri hedefleniyor. Basit etkileşimler için transition kısa ve etkilidir.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>2) Transition: opacity ve transform ile kart efekti\u003C/h3>\n\u003Cp>Bir kart üzerinde hafif yukarı hareket ve gölge/eğim efekti için transition uygundur. Transition parametreleri (\u003Cstrong>transition-property\u003C/strong>, \u003Cstrong>transition-duration\u003C/strong>, \u003Cstrong>transition-timing-function\u003C/strong>, \u003Cstrong>transition-delay\u003C/strong>) hakkında detaylı bilgi için MDN'deki \u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/CSS/transition-duration\">transition-duration - MDN (TR)\u003C/a> sayfasına bakabilirsiniz.\u003C/p>\n\u003Col>\n  \u003Cli>.card {\u003C/li>\n  \u003Cli>  transition: transform 250ms ease, box-shadow 250ms ease, opacity 250ms ease;\u003C/li>\n  \u003Cli>  transform: translateY(0);\u003C/li>\n  \u003Cli>  opacity: 1;\u003C/li>\n  \u003Cli>}\u003C/li>\n  \u003Cli>.card:hover {\u003C/li>\n  \u003Cli>  transform: translateY(-8px);\u003C/li>\n  \u003Cli>  box-shadow: 0 12px 24px rgba(0,0,0,0.12);\u003C/li>\n  \u003Cli>  opacity: 0.98;\u003C/li>\n  \u003Cli>}\u003C/li>\n\u003C/ol>\n\u003Cp>Açıklama: Opacity ve transform birlikte kullanıldığında, hem görünürlüğü hem de konumu yumuşatarak hoş bir efekt verir.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>3) Keyframes: sayfa yüklenmesinde kayan panel\u003C/h3>\n\u003Cp>Eğer bir elemanın yüklenme sırasına göre birden fazla durakla hareket etmesini istiyorsanız \u003Cstrong>@keyframes\u003C/strong> kullanın. Keyframe animasyonları hakkında MDN'in animasyon rehberini inceleyin: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations\">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations\u003C/a>.\u003C/p>\n\u003Col>\n  \u003Cli>@keyframes slide-in {\u003C/li>\n  \u003Cli>  from { transform: translateX(-100%); opacity: 0; }\u003C/li>\n  \u003Cli>  to   { transform: translateX(0); opacity: 1; }\u003C/li>\n  \u003Cli>}\u003C/li>\n  \u003Cli>.panel {\u003C/li>\n  \u003Cli>  animation: slide-in 0.6s cubic-bezier(.22,.9,.03,1) forwards;\u003C/li>\n  \u003Cli>}\u003C/li>\n\u003C/ol>\n\u003Cp>Not: \u003Cstrong>animation-fill-mode: forwards\u003C/strong> kullanımı, animasyon bittikten sonra son durumun korunmasını sağlar. Bu özellikle ilgili MDN sayfası için: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-fill-mode\">animation-fill-mode - MDN\u003C/a>.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>4) Tekrar eden ve yönlü animasyonlar\u003C/h3>\n\u003Cp>Örneğin bir ikonun hafifçe zıplaması için:\u003C/p>\n\u003Col>\n  \u003Cli>@keyframes bounce {\u003C/li>\n  \u003Cli>  0% { transform: translateY(0); }\u003C/li>\n  \u003Cli>  50% { transform: translateY(-8px); }\u003C/li>\n  \u003Cli> 100% { transform: translateY(0); }\u003C/li>\n  \u003Cli>}\u003C/li>\n  \u003Cli>.icon { animation: bounce 1.2s ease-in-out infinite; }\u003C/li>\n\u003C/ol>\n\u003Cp>Alternatif olarak \u003Cstrong>animation-direction: alternate\u003C/strong> ile ileri-geri davranışı sağlayabilirsiniz.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Performans ipuçları\u003C/h3>\n\u003Cp>Animasyonların performansı, kullanıcı deneyimini doğrudan etkiler. Genel öneriler:\u003C/p>\n\u003Cul>\n  \u003Cli>Animasyonlar sadece gerekli özellikleri hedeflesin; \u003Cstrong>transform\u003C/strong> ve \u003Cstrong>opacity\u003C/strong> çoğunlukla donanım hızlandırmalı ve daha hızlıdır. (Kaynak: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations\">MDN CSS animations\u003C/a>).\u003C/li>\n  \u003Cli>Layout (yeniden akış) tetikleyen özelliklere (width, height, top, left, margin) mümkün olduğunca az animasyon uygulanmalı; bunlar pahalıdır.\u003C/li>\n  \u003Cli>\u003Cstrong>will-change\u003C/strong> kullanmak kısa süreli iyileştirme sağlayabilir ancak gereksiz kullanımı bellek/performans sorunlarına yol açabilir.\u003C/li>\n  \u003Cli>Basit etkileşimler için önce \u003Cstrong>transition\u003C/strong> deneyin; karmaşık zamanlamalar için \u003Cstrong>@keyframes\u003C/strong> tercih edin.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch3>Erişilebilirlik (prefers-reduced-motion)\u003C/h3>\n\u003Cp>Hareketten kaçınmayı tercih eden kullanıcılar için \u003Cstrong>prefers-reduced-motion\u003C/strong> medya sorgusunu kullanarak animasyonları azaltmak iyi bir uygulamadır. Örnek:\u003C/p>\n\u003Col>\n  \u003Cli>@media (prefers-reduced-motion: reduce) {\u003C/li>\n  \u003Cli>  * { animation: none !important; transition: none !important; }\u003C/li>\n  \u003Cli>}\u003C/li>\n\u003C/ol>\n\u003Cp>Bu, hareket hassasiyeti olan kullanıcılar için daha rahat bir deneyim sağlar. Uygulamada test etmeyi unutmayın.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Uygulama adımları: kısa kontrol listesi\u003C/h3>\n\u003Cul>\n  \u003Cli>1) Hangi görsel değişikliğe ihtiyacınız olduğunu tanımlayın (konum, opacity, renk...).\u003C/li>\n  \u003Cli>2) Hedef özellikleri seçin: mümkünse \u003Cstrong>transform\u003C/strong> veya \u003Cstrong>opacity\u003C/strong>.\u003C/li>\n  \u003Cli>3) Basitse \u003Cstrong>transition\u003C/strong>, adım adım gerekiyorsa \u003Cstrong>@keyframes\u003C/strong> kullanın.\u003C/li>\n  \u003Cli>4) Süre ve \u003Cem>timing-function\u003C/em> seçin (genelde 150–400ms arası, easing tercih edilir).\u003C/li>\n  \u003Cli>5) Performans testi ve erişilebilirlik (prefers-reduced-motion) kontrollerini yapın.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch3>Sonuç\u003C/h3>\n\u003Cp>Hover, transition ve keyframe ile pek çok basit ama etkili animasyon yapılabilir. Basit etkileşimlerde \u003Cstrong>transition\u003C/strong>, daha uzun veya çok adımlı hareketler için \u003Cstrong>@keyframes\u003C/strong> idealdir. Performans ve erişilebilirlik kriterlerini göz önünde bulundurarak küçük adımlarla başlayın ve MDN dokümantasyonunu referans alın: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations\">MDN Animations\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/docs/Web/CSS/transition\">MDN Transition\u003C/a>.\u003C/p>\n","Basit CSS animasyonları — Hover, Transition ve Keyframe örne","Hover, transition ve @keyframes ile basit CSS animasyonlarını adım adım öğrenin; örnek kodlar, performans önerileri ve erişilebilirlik ipuçlarıyla hızlı rehber.","kolay kod örnekleri, hover animasyon örnek, transition örnekler, keyframes kullanımı, performans ipuçları","basit-css-animasyonlari-hover-transition-ve-keyframe-ornekleri","2026-04-09T17:04:05.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/5989008b4d585e630d5d9329cdb7e519.jpg","/media/blog/5989008b4d585e630d5d9329cdb7e519_thumb.jpg","/media/blog/5989008b4d585e630d5d9329cdb7e519.webp","/media/blog/5989008b4d585e630d5d9329cdb7e519_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,681,0,"4 dk okuma süresi","/blog/css-animasyon-mini-ornekleri/basit-css-animasyonlari-hover-transition-ve-keyframe-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/5989008b4d585e630d5d9329cdb7e519.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/basit-css-animasyonlari-hover-transition-ve-keyframe-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/basit-css-animasyonlari-hover-transition-ve-keyframe-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}]