[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-hover-ve-keyframe-animasyonlari-kolay-kod-ornekleriyle-basit-css-rehberi":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},20998,"Hover ve Keyframe Animasyonları: Kolay Kod Örnekleriyle Basit CSS Rehberi","Bu rehberde :hover ile transition kullanarak basit etkileşim efektleri ve @keyframes ile zaman çizelgesi kontrollü CSS animasyonları için kolay kod örnekleri bulacaksınız. Ayrıca animation-timing-function seçimi, performans için transform/opacity tercihleri ve prefers-reduced-motion ile erişilebilirlik uyarlaması pratik şekilde anlatılır.","\u003Ch2>CSS’te animasyon mantığı: “transition” mı, “@keyframes” mi?\u003C/h2>\n\u003Cp>CSS ile hareket ve geçiş efektleri yazmanın iki temel yolu vardır: \u003Cstrong>transition\u003C/strong> ve \u003Cstrong>animation\u003C/strong>. İkisi de arayüzü daha anlaşılır gösterebilir; fakat kullanım amaçları farklıdır.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Transition\u003C/strong>: Bir öğenin bir durumdan başka bir duruma \u003Cem>geçişini\u003C/em> yumuşatır. En sık kullanım: \u003Cstrong>:hover\u003C/strong>, \u003Cstrong>:focus\u003C/strong>, \u003Cstrong>.is-active\u003C/strong> gibi durum değişiklikleri.\u003C/li>\n\u003Cli>\u003Cstrong>@keyframes + animation\u003C/strong>: Zaman çizelgesi üzerinde birden fazla ara adım tanımlayıp animasyonu bağımsız çalıştırır. Döngüler, “loading” hareketleri, daha kompleks sekanslar için uygundur.\u003C/li>\n\u003C/ul>\n\u003Cp>Söz dizimi ve alt özellikler için resmi dokümanlar: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions\">MDN: Using CSS transitions\u003C/a> ve \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations\">MDN: CSS animations\u003C/a>.\u003C/p>\n\u003Chr>\n\n\u003Ch2>1) Transition ile hover efektleri (en hızlı başlangıç)\u003C/h2>\n\u003Cp>Hover efektleri için pratik yaklaşım: normal stile \u003Cstrong>transition\u003C/strong> ekleyin, \u003Cstrong>:hover\u003C/strong> içinde hedef değerleri değiştirin.\u003C/p>\n\n\u003Ch3>Örnek 1: Buton hover – renk + hafif yükselme\u003C/h3>\n\u003Cblockquote>\n\u003Cstrong>Copy HTML\u003C/strong>\u003Cbr>\n<a class="btn" href="https://example.com">Get Started</a>\u003Cbr>\u003Cbr>\n\u003Cstrong>Copy CSS\u003C/strong>\u003Cbr>\n.btn {\u003Cbr>\n  display: inline-block;\u003Cbr>\n  padding: 12px 16px;\u003Cbr>\n  border-radius: 10px;\u003Cbr>\n  background: #1f6feb;\u003Cbr>\n  color: white;\u003Cbr>\n  text-decoration: none;\u003Cbr>\n  transform: translateY(0);\u003Cbr>\n  transition: transform 180ms ease, background-color 180ms ease;\u003Cbr>\n}\u003Cbr>\n.btn:hover {\u003Cbr>\n  background: #1858c7;\u003Cbr>\n  transform: translateY(-2px);\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Cul>\n\u003Cli>\u003Cstrong>Animasyonlanan özellikler:\u003C/strong> transform, background-color\u003C/li>\n\u003Cli>\u003Cstrong>Süre / eğri:\u003C/strong> 180ms, ease\u003C/li>\n\u003Cli>\u003Cstrong>Tetikleyici:\u003C/strong> .btn:hover\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cstrong>İpucu:\u003C/strong> Transition’ı \u003Cem>:hover\u003C/em> içinde değil, normal sınıfta tanımlamak hover bittiğinde de yumuşak dönüş sağlar (MDN örnek yaklaşımıyla uyumludur).\u003C/p>\n\n\u003Ch3>Örnek 2: Kart hover – gölge + ölçek\u003C/h3>\n\u003Cp>\u003Cstrong>Not (performans):\u003C/strong> web.dev, bazı özelliklerin animasyon sırasında daha fazla iş (özellikle yeniden boyama veya yerleşim hesapları) tetikleyebileceğini; bu yüzden mümkün olduğunda \u003Cstrong>transform\u003C/strong>/\u003Cstrong>opacity\u003C/strong> gibi seçeneklerin tercih edilip değişikliklerin profillenerek doğrulanmasını önerir. (Kaynak: \u003Ca href=\"https://web.dev/learn/css/transitions/\">web.dev: Transitions\u003C/a>) Box-shadow gibi efektler de öğenin alanı ve cihaz/GPU durumuna göre \u003Cem>daha maliyetli olabilir\u003C/em>; değerleri hafif tutup gerçek cihazda test edin.\u003C/p>\n\u003Cblockquote>\n\u003Cstrong>Copy HTML\u003C/strong>\u003Cbr>\n<div class="card">\u003Cbr>\n  <h3>Plan</h3>\u003Cbr>\n  <p>Kısa açıklama.</p>\u003Cbr>\n</div>\u003Cbr>\u003Cbr>\n\u003Cstrong>Copy CSS\u003C/strong>\u003Cbr>\n.card {\u003Cbr>\n  padding: 16px;\u003Cbr>\n  border-radius: 14px;\u003Cbr>\n  background: #ffffff;\u003Cbr>\n  transform: scale(1);\u003Cbr>\n  box-shadow: 0 1px 2px rgba(0,0,0,0.08);\u003Cbr>\n  transition: transform 200ms ease, box-shadow 200ms ease;\u003Cbr>\n}\u003Cbr>\n.card:hover {\u003Cbr>\n  transform: scale(1.02);\u003Cbr>\n  box-shadow: 0 10px 24px rgba(0,0,0,0.14);\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Cul>\n\u003Cli>\u003Cstrong>Animasyonlanan özellikler:\u003C/strong> transform, box-shadow\u003C/li>\n\u003Cli>\u003Cstrong>Süre / eğri:\u003C/strong> 200ms, ease\u003C/li>\n\u003Cli>\u003Cstrong>Not:\u003C/strong> Görsel efektler (ör. gölge) bazı senaryolarda daha ağır hissedilebilir; profilleyip test edin (web.dev).\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Örnek 3: Link underline animasyonu (background-size yöntemi)\u003C/h3>\n\u003Cblockquote>\n\u003Cstrong>Copy HTML\u003C/strong>\u003Cbr>\n<a class="u-link" href="https://example.com">Docs</a>\u003Cbr>\u003Cbr>\n\u003Cstrong>Copy CSS\u003C/strong>\u003Cbr>\n.u-link {\u003Cbr>\n  color: #111827;\u003Cbr>\n  text-decoration: none;\u003Cbr>\n  background-image: linear-gradient(currentColor, currentColor);\u003Cbr>\n  background-repeat: no-repeat;\u003Cbr>\n  background-position: 0 100%;\u003Cbr>\n  background-size: 0% 2px;\u003Cbr>\n  transition: background-size 180ms ease;\u003Cbr>\n}\u003Cbr>\n.u-link:hover {\u003Cbr>\n  background-size: 100% 2px;\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Cul>\n\u003Cli>\u003Cstrong>Animasyonlanan özellik:\u003C/strong> background-size\u003C/li>\n\u003Cli>\u003Cstrong>Süre / eğri:\u003C/strong> 180ms, ease\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\u003Ch2>2) Transition söz dizimi: Ne yazdığınızı bilin\u003C/h2>\n\u003Cp>\u003Cstrong>transition\u003C/strong> kısa gösterimi, birden fazla alt özelliği tek satırda birleştirir (property, duration, timing-function, delay). Detay: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions\">MDN: Using CSS transitions\u003C/a>.\u003C/p>\n\u003Ch3>Okunabilir bir şablon\u003C/h3>\n\u003Cblockquote>\ntransition: <property> <duration> <timing-function> <delay>;\u003Cbr>\n\u003C/blockquote>\n\u003Cul>\n\u003Cli>\u003Cstrong>property\u003C/strong>: Hangi CSS özelliği geçiş yapacak? (örn. transform, opacity, background-color)\u003C/li>\n\u003Cli>\u003Cstrong>duration\u003C/strong>: Ne kadar sürecek? (örn. 180ms)\u003C/li>\n\u003Cli>\u003Cstrong>timing-function\u003C/strong>: Hız eğrisi (ease, linear, ease-in, ease-out, cubic-bezier(...))\u003C/li>\n\u003Cli>\u003Cstrong>delay\u003C/strong>: Başlamadan önce beklenecek süre (opsiyonel)\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Timing-function seçimi: küçük bir rehber\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>ease\u003C/strong>: Genel UI geçişlerinde yaygın bir varsayılan.\u003C/li>\n\u003Cli>\u003Cstrong>ease-out\u003C/strong>: Hover ile “yaklaşma / yükselme” gibi hareketlerde çoğu zaman doğal hissettirebilir.\u003C/li>\n\u003Cli>\u003Cstrong>linear\u003C/strong>: Sürekli akan, tekrar eden hareketlerde (örn. spinner) tutarlı görünür.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\u003Ch2>3) @keyframes ile animasyon: Zaman çizelgesi kontrolü\u003C/h2>\n\u003Cp>Transition “durum değişiminde” çalışır; \u003Cstrong>@keyframes\u003C/strong> ise animasyonun ara adımlarını tanımlar. Animation özellikleri (duration, timing-function, iteration-count vb.) ile birlikte kullanılır. Detay: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations\">MDN: CSS animations\u003C/a>.\u003C/p>\n\n\u003Ch3>Örnek 4: Basit pulse (vurgulama) animasyonu\u003C/h3>\n\u003Cblockquote>\n\u003Cstrong>Copy HTML\u003C/strong>\u003Cbr>\n<span class="badge">New</span>\u003Cbr>\u003Cbr>\n\u003Cstrong>Copy CSS\u003C/strong>\u003Cbr>\n@keyframes pulse {\u003Cbr>\n  0% { transform: scale(1); opacity: 1; }\u003Cbr>\n  70% { transform: scale(1.08); opacity: 0.85; }\u003Cbr>\n  100% { transform: scale(1); opacity: 1; }\u003Cbr>\n}\u003Cbr>\n.badge {\u003Cbr>\n  display: inline-block;\u003Cbr>\n  padding: 6px 10px;\u003Cbr>\n  border-radius: 999px;\u003Cbr>\n  background: #16a34a;\u003Cbr>\n  color: white;\u003Cbr>\n  animation: pulse 900ms ease-in-out 0ms 2;\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Cul>\n\u003Cli>\u003Cstrong>Animasyonlanan özellikler:\u003C/strong> transform, opacity\u003C/li>\n\u003Cli>\u003Cstrong>Süre / eğri / tekrar:\u003C/strong> 900ms, ease-in-out, 2 kez\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Örnek 5: Loading spinner (sürekli döngü)\u003C/h3>\n\u003Cblockquote>\n\u003Cstrong>Copy HTML\u003C/strong>\u003Cbr>\n<div class="spinner" aria-label="Loading"></div>\u003Cbr>\u003Cbr>\n\u003Cstrong>Copy CSS\u003C/strong>\u003Cbr>\n@keyframes spin {\u003Cbr>\n  to { transform: rotate(360deg); }\u003Cbr>\n}\u003Cbr>\n.spinner {\u003Cbr>\n  width: 28px;\u003Cbr>\n  height: 28px;\u003Cbr>\n  border-radius: 50%;\u003Cbr>\n  border: 3px solid rgba(0,0,0,0.15);\u003Cbr>\n  border-top-color: rgba(0,0,0,0.55);\u003Cbr>\n  animation: spin 800ms linear infinite;\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Cul>\n\u003Cli>\u003Cstrong>Animasyonlanan özellik:\u003C/strong> transform: rotate()\u003C/li>\n\u003Cli>\u003Cstrong>Süre / eğri / tekrar:\u003C/strong> 800ms, linear, infinite\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Örnek 6: Hover ile keyframe tetikleme (isteğe bağlı)\u003C/h3>\n\u003Cblockquote>\n\u003Cstrong>Copy HTML\u003C/strong>\u003Cbr>\n<span class="icon" aria-label="Icon">*</span>\u003Cbr>\u003Cbr>\n\u003Cstrong>Copy CSS\u003C/strong>\u003Cbr>\n@keyframes wiggle {\u003Cbr>\n  0% { transform: rotate(0deg); }\u003Cbr>\n  25% { transform: rotate(2deg); }\u003Cbr>\n  50% { transform: rotate(-2deg); }\u003Cbr>\n  75% { transform: rotate(1deg); }\u003Cbr>\n  100% { transform: rotate(0deg); }\u003Cbr>\n}\u003Cbr>\n.icon:hover {\u003Cbr>\n  animation: wiggle 220ms ease-in-out 0ms 1;\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Cul>\n\u003Cli>\u003Cstrong>Tetikleyici:\u003C/strong> .icon:hover\u003C/li>\n\u003Cli>\u003Cstrong>Süre / eğri / tekrar:\u003C/strong> 220ms, ease-in-out, 1 kez\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\u003Ch2>4) Transition vs Animation: Hızlı karşılaştırma tablosu\u003C/h2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Konu\u003C/th>\n\u003Cth>transition\u003C/th>\n\u003Cth>@keyframes + animation\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Tetikleme\u003C/td>\n\u003Ctd>Durum değişimi (hover/focus/class)\u003C/td>\n\u003Ctd>Bağımsız başlatılabilir, döngü olabilir\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>Karmaşıklık\u003C/td>\n\u003Ctd>Basit geçişler için ideal\u003C/td>\n\u003Ctd>Çok adımlı sekanslar için güçlü\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>Kontrol\u003C/td>\n\u003Ctd>Başlangıç-bitiş arasında\u003C/td>\n\u003Ctd>0–100% arası birçok ara kare\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>Tipik kullanım\u003C/td>\n\u003Ctd>Hover efektleri, aç/kapa geçişleri\u003C/td>\n\u003Ctd>Spinner, pulse, intro/outro, mikro animasyon\u003C/td>\n\u003C/tr>\n\u003C/tbody>\n\u003C/table>\n\n\u003Chr>\n\u003Ch2>5) Performans: Hangi özellikleri animasyonlamalısınız?\u003C/h2>\n\u003Cp>Akıcı animasyon için her karede yapılan iş yükü önemlidir. web.dev, \u003Cstrong>transform\u003C/strong> ve \u003Cstrong>opacity\u003C/strong> animasyonlarının çoğu durumda daha elverişli olabildiğini; \u003Cstrong>layout\u003C/strong> etkileyen değişikliklerin (örn. width/height/top/left) ise ek hesaplamalar tetikleyebileceğini anlatır. Bu nedenle doğru yaklaşım, mümkün oldukça transform/opacity ile çözmek ve sonucu \u003Cem>profiling\u003C/em> ile doğrulamaktır: \u003Ca href=\"https://web.dev/learn/css/transitions/\">web.dev: Transitions\u003C/a>.\u003C/p>\n\u003Ch3>Pratik kontrol listesi\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Genellikle tercih edilenler:\u003C/strong> transform (translate/scale/rotate), opacity\u003C/li>\n\u003Cli>\u003Cstrong>Duruma göre daha maliyetli olabilenler:\u003C/strong> geniş alanlara uygulanan gölge/efekt türleri (ör. box-shadow) cihaz ve sahne karmaşıklığına göre daha ağır hissedilebilir; küçük değerlerle deneyin ve test edin.\u003C/li>\n\u003Cli>\u003Cstrong>Layout etkileyenler:\u003C/strong> width/height/top/left gibi değişimler daha fazla yeniden hesaplama gerektirebilir; gerekiyorsa süreyi kısa tutun ve profilleyin.\u003C/li>\n\u003C/ul>\n\u003Cp>En iyi yaklaşım: hedef tarayıcı ve gerçek cihazlarda test etmek; DevTools performans araçlarıyla gözlem yapmaktır.\u003C/p>\n\n\u003Chr>\n\u003Ch2>6) Erişilebilirlik: prefers-reduced-motion ile hareketi azaltın\u003C/h2>\n\u003Cp>Animasyonlar bazı kullanıcılar için rahatsız edici olabilir. Bu nedenle \u003Cstrong>prefers-reduced-motion\u003C/strong> ile animasyon/transition’ları kapatmak veya sadeleştirmek önerilen bir pratiktir: \u003Ca href=\"https://web.dev/learn/css/transitions/\">web.dev: Transitions\u003C/a>.\u003C/p>\n\u003Ch3>Hızlı uygulama örneği\u003C/h3>\n\u003Cblockquote>\n\u003Cstrong>Copy CSS\u003C/strong>\u003Cbr>\n@media (prefers-reduced-motion: reduce) {\u003Cbr>\n  * {\u003Cbr>\n    animation: none !important;\u003Cbr>\n    transition: none !important;\u003Cbr>\n    scroll-behavior: auto !important;\u003Cbr>\n  }\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Cp>\u003Cstrong>Not:\u003C/strong> Bu örnek “genel kapatma” yaklaşımıdır. Üretimde, yalnızca gerekli bileşenlerde azaltma yapmak isteyebilirsiniz.\u003C/p>\n\n\u003Chr>\n\u003Ch2>7) Tarayıcı desteği ve test: Nereden kontrol etmeli?\u003C/h2>\n\u003Cp>Transition genel olarak yaygın destek görür; yine de hedef kitlenize göre kontrol etmek iyi bir pratiktir. \u003Ca href=\"https://caniuse.com/css-transitions\">Can I use: CSS Transitions\u003C/a> bu konuda hızlı bir tablo sunar.\u003C/p>\n\u003Cul>\n\u003Cli>Hedef tarayıcıları belirleyin (özellikle mobil).\u003C/li>\n\u003Cli>Özelliği Can I Use üzerinden kontrol edin.\u003C/li>\n\u003Cli>En kritik etkileşimleri gerçek cihazda test edin (hover, focus, dokunmatik davranışlar).\u003C/li>\n\u003C/ul>\n\u003Cp>Dokunmatik cihazlarda hover davranışı farklı olabilir; kritik işlevleri yalnızca hover’a bağlamamaya çalışın.\u003C/p>\n\n\u003Chr>\n\u003Ch2>8) Mini “uygula ve öğren” planı (10 dakika)\u003C/h2>\n\u003Col>\n\u003Cli>\u003Cstrong>Bir buton seçin:\u003C/strong> .btn sınıfı oluşturun.\u003C/li>\n\u003Cli>\u003Cstrong>Normal duruma transition ekleyin:\u003C/strong> transform ve background-color ile başlayın.\u003C/li>\n\u003Cli>\u003Cstrong>:hover içinde hedef değerleri değiştirin:\u003C/strong> translateY ve daha koyu bir renk gibi.\u003C/li>\n\u003Cli>\u003Cstrong>Bir keyframe ekleyin:\u003C/strong> pulse veya spin gibi.\u003C/li>\n\u003Cli>\u003Cstrong>prefers-reduced-motion ekleyin:\u003C/strong> animasyonları azaltıp sayfayı tekrar deneyin.\u003C/li>\n\u003Cli>\u003Cstrong>Hız eğrisini değiştirin:\u003C/strong> ease-out ve linear karşılaştırın.\u003C/li>\n\u003C/ol>\n\n\u003Chr>\n\u003Ch2>Sonuç\u003C/h2>\n\u003Cp>Basit hover efektlerinde \u003Cstrong>transition\u003C/strong> ile hızlıca temiz bir etkileşim hissi yakalayabilirsiniz. Daha anlatımlı hareketler, döngüler veya çok adımlı sekanslar için \u003Cstrong>@keyframes\u003C/strong> ve \u003Cstrong>animation\u003C/strong> devreye girer. Performans ve erişilebilirlik için (özellikle) transform/opacity tercihlerini ve \u003Cstrong>prefers-reduced-motion\u003C/strong> desteğini ihmal etmeyin.\u003C/p>","Hover ve @keyframes Animasyonları: Kolay CSS Kod Örnekleri","Transition ile :hover efektleri ve @keyframes animasyonlarını kısa örneklerle öğrenin; timing-function seçimi, performans ipuçları ve prefers-reduced-motion uyG","CSS transition, :hover efektleri, @keyframes, CSS animation, animation-timing-function, prefers-reduced-motion, CSS performans","hover-ve-keyframe-animasyonlari-kolay-kod-ornekleriyle-basit-css-rehberi","2026-03-08T09:32:35.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/772b1a56dfc64a7f89de8ff91d39b3b1.jpg","/media/blog/772b1a56dfc64a7f89de8ff91d39b3b1_thumb.jpg","/media/blog/772b1a56dfc64a7f89de8ff91d39b3b1.webp","/media/blog/772b1a56dfc64a7f89de8ff91d39b3b1_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},7,1349,0,"7 dk okuma süresi","/blog/css-animasyon-mini-ornekleri/hover-ve-keyframe-animasyonlari-kolay-kod-ornekleriyle-basit-css-rehberi",[],["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/772b1a56dfc64a7f89de8ff91d39b3b1.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/hover-ve-keyframe-animasyonlari-kolay-kod-ornekleriyle-basit-css-rehberi",{"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-keyframe-animasyonlari-kolay-kod-ornekleriyle-basit-css-rehberi",["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]