[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-category-css-animasyon-mini-ornekleri":3},{"dataList":4,"heading":168,"dataCount":171,"metaData":172,"schema":218},["Reactive",5],[6,26,38,50,62,74,86,98,110,122,134,146,158],{"id":7,"title":8,"summary":9,"slug":10,"createdAt":11,"updatedAt":11,"blog_categories":12,"authors":16,"image":21,"thumb":22,"image_webp":23,"thumb_webp":24,"rating":25},36065,"Basit CSS Animasyonları: Hover ve Transition Örnekleri ile Performans Odaklı Tas","Bu makalede, \u003Cstrong>CSS Animasyon Mini Örnekleri\u003C/strong> kapsamında \u003Cstrong>hover efektleri css\u003C/strong> ve \u003Cstrong>transition örnekleri\u003C/strong> ile performans odaklı \u003Cstrong>css animasyon örnekleri\u003C/strong> inceleniyor. Başlangıç seviyesinden ileri düzeye doğru kolayca uygulanabilir teknikler sunulmaktadır.","/blog/css-animasyon-mini-ornekleri/basit-css-animasyonlari-hover-ve-transition-ornekleri-ile-performans-odakli-tas","2026-05-18T11:24:19.000Z",{"id":13,"title":14,"slug":15},212,"CSS Animasyon Mini Örnekleri","css-animasyon-mini-ornekleri",{"id":17,"name":18,"nickname":19,"slug":20},93,"Onur Tekin","CodeCraftsman","onur-tekin","665b347d6f09c9f21248ebcbca2a73ed.jpg","665b347d6f09c9f21248ebcbca2a73ed_thumb.jpg","665b347d6f09c9f21248ebcbca2a73ed.webp","665b347d6f09c9f21248ebcbca2a73ed_thumb.webp",null,{"id":27,"title":28,"summary":29,"slug":30,"createdAt":31,"updatedAt":31,"blog_categories":32,"authors":33,"image":34,"thumb":35,"image_webp":36,"thumb_webp":37,"rating":25},30810,"CSS Hover Animasyonlarıyla Canlandırma: Tasarımda Basit Snippetlerle Etkileyici ","CSS hover animasyonları, web tasarımında kullanıcı deneyimini artırmak için kullanılan etkili yöntemlerdir. Bu yazıda, basit CSS snippetleriyle hover efektlerini nasıl canlandırabileceğinizi öğreneceksiniz.","/blog/css-animasyon-mini-ornekleri/css-hover-animasyonlariyla-canlandirma-tasarimda-basit-snippetlerle-etkileyici","2026-05-02T22:03:37.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"488979af1503b5d88a994a696d7236a0.jpg","488979af1503b5d88a994a696d7236a0_thumb.jpg","488979af1503b5d88a994a696d7236a0.webp","488979af1503b5d88a994a696d7236a0_thumb.webp",{"id":39,"title":40,"summary":41,"slug":42,"createdAt":43,"updatedAt":43,"blog_categories":44,"authors":45,"image":46,"thumb":47,"image_webp":48,"thumb_webp":49,"rating":25},28475,"CSS Hover Animasyonlarıyla Etkileşim: Web Tasarımda Dinamik Dokunuşlar","CSS hover animasyonları, web tasarımda kullanıcı etkileşimini artıran dinamik ve etkileyici görsel efektler sunar. Bu yazıda, CSS hover animasyonlarının temel prensipleri ve uygulama örnekleri detaylıca ele alınmaktadır.","/blog/css-animasyon-mini-ornekleri/css-hover-animasyonlariyla-etkilesim-web-tasarimda-dinamik-dokunuslar","2026-04-15T23:34:35.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"08a275bfef384401c40b85a9efd35149.jpg","08a275bfef384401c40b85a9efd35149_thumb.jpg","08a275bfef384401c40b85a9efd35149.webp","08a275bfef384401c40b85a9efd35149_thumb.webp",{"id":51,"title":52,"summary":53,"slug":54,"createdAt":55,"updatedAt":55,"blog_categories":56,"authors":57,"image":58,"thumb":59,"image_webp":60,"thumb_webp":61,"rating":25},28360,"CSS Animasyonları: Hover, Geçiş ve Basit Keyframe Örnekleri","Bu rehberde hover efektleri, transition örnekleri ve @keyframes kullanarak kolay kod örnekleri gösterilir; performans ve erişilebilirlik ipuçları da eklenmiştir.","/blog/css-animasyon-mini-ornekleri/css-animasyonlari-hover-gecis-ve-basit-keyframe-ornekleri","2026-04-15T15:08:19.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"91acc5cb1197f638512347f0b504e67e.jpg","91acc5cb1197f638512347f0b504e67e_thumb.jpg","91acc5cb1197f638512347f0b504e67e.webp","91acc5cb1197f638512347f0b504e67e_thumb.webp",{"id":63,"title":64,"summary":65,"slug":66,"createdAt":67,"updatedAt":67,"blog_categories":68,"authors":69,"image":70,"thumb":71,"image_webp":72,"thumb_webp":73,"rating":25},28212,"Temel CSS Animasyon Kod Örnekleri ile Başlangıç Seviyesi Öğrenin","Bu yazıda, CSS animasyonlarının temel prensiplerini ve başlangıç seviyesi için hazırlanmış pratik kod örneklerini keşfedeceksiniz. Hover efektleri ve temel animasyon snippetleri ile web tasarımınızı canlandırın.","/blog/css-animasyon-mini-ornekleri/temel-css-animasyon-kod-ornekleri-ile-baslangic-seviyesi-ogrenin","2026-04-14T20:15:51.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"f5ac4ab230040a5205a36cd839c3eb2c.jpg","f5ac4ab230040a5205a36cd839c3eb2c_thumb.jpg","f5ac4ab230040a5205a36cd839c3eb2c.webp","f5ac4ab230040a5205a36cd839c3eb2c_thumb.webp",{"id":75,"title":76,"summary":77,"slug":78,"createdAt":79,"updatedAt":79,"blog_categories":80,"authors":81,"image":82,"thumb":83,"image_webp":84,"thumb_webp":85,"rating":25},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.","/blog/css-animasyon-mini-ornekleri/basit-css-animasyonlari-hover-transition-ve-keyframe-ornekleri","2026-04-09T17:04:05.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"5989008b4d585e630d5d9329cdb7e519.jpg","5989008b4d585e630d5d9329cdb7e519_thumb.jpg","5989008b4d585e630d5d9329cdb7e519.webp","5989008b4d585e630d5d9329cdb7e519_thumb.webp",{"id":87,"title":88,"summary":89,"slug":90,"createdAt":91,"updatedAt":91,"blog_categories":92,"authors":93,"image":94,"thumb":95,"image_webp":96,"thumb_webp":97,"rating":25},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.","/blog/css-animasyon-mini-ornekleri/css-animasyonlari-hover-efektleri-ve-temel-keyframes-ornekleri","2026-04-05T15:32:03.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"6473f8d850f122ff56466364e193635e.jpg","6473f8d850f122ff56466364e193635e_thumb.jpg","6473f8d850f122ff56466364e193635e.webp","6473f8d850f122ff56466364e193635e_thumb.webp",{"id":99,"title":100,"summary":101,"slug":102,"createdAt":103,"updatedAt":103,"blog_categories":104,"authors":105,"image":106,"thumb":107,"image_webp":108,"thumb_webp":109,"rating":25},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.","/blog/css-animasyon-mini-ornekleri/hover-ve-keyframe-animasyonlari-kolay-kod-ornekleriyle-basit-css-rehberi","2026-03-08T09:32:35.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"772b1a56dfc64a7f89de8ff91d39b3b1.jpg","772b1a56dfc64a7f89de8ff91d39b3b1_thumb.jpg","772b1a56dfc64a7f89de8ff91d39b3b1.webp","772b1a56dfc64a7f89de8ff91d39b3b1_thumb.webp",{"id":111,"title":112,"summary":113,"slug":114,"createdAt":115,"updatedAt":115,"blog_categories":116,"authors":117,"image":118,"thumb":119,"image_webp":120,"thumb_webp":121,"rating":25},19613,"Hover Efektleriyle Canlı Tasarımlar: CSS Animasyon Mini Örnekleriyle Yaratıcılığ","Hover efektleri, web tasarımında kullanıcı deneyimini artıran ve sayfalara canlılık katan önemli bir araçtır. Bu yazıda, CSS animasyonlarıyla hover efektlerinin nasıl uygulanacağını ve tasarım ipuçlarını mini örneklerle keşfedeceksiniz.","/blog/css-animasyon-mini-ornekleri/hover-efektleriyle-canli-tasarimlar-css-animasyon-mini-ornekleriyle-yaraticilig","2026-02-22T02:07:21.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"f94a774a5f48fe82c150bb3af5c988e1.jpg","f94a774a5f48fe82c150bb3af5c988e1_thumb.jpg","f94a774a5f48fe82c150bb3af5c988e1.webp","f94a774a5f48fe82c150bb3af5c988e1_thumb.webp",{"id":123,"title":124,"summary":125,"slug":126,"createdAt":127,"updatedAt":127,"blog_categories":128,"authors":129,"image":130,"thumb":131,"image_webp":132,"thumb_webp":133,"rating":25},19563,"Temel CSS Animasyonlarıyla Web Tasarımında Hareketlilik Yaratma","Bu yazıda, \u003Cstrong>CSS temel animasyon\u003C/strong> teknikleri ve \u003Cstrong>snippetler\u003C/strong> kullanarak \u003Cstrong>web tasarımı\u003C/strong>nda nasıl etkileyici \u003Cstrong>kaydırma efektleri\u003C/strong> oluşturabileceğinizi keşfedeceksiniz.","/blog/css-animasyon-mini-ornekleri/temel-css-animasyonlariyla-web-tasariminda-hareketlilik-yaratma","2026-02-21T11:25:05.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"b212647190386f0dd9083d2f47809973.jpg","b212647190386f0dd9083d2f47809973_thumb.jpg","b212647190386f0dd9083d2f47809973.webp","b212647190386f0dd9083d2f47809973_thumb.webp",{"id":135,"title":136,"summary":137,"slug":138,"createdAt":139,"updatedAt":139,"blog_categories":140,"authors":141,"image":142,"thumb":143,"image_webp":144,"thumb_webp":145,"rating":25},6973,"Temel CSS Animasyonlarıyla Etkileşim: Hover Efektleri ve Snippetlerle Frontend'e","Bu yazıda, \u003Cstrong>CSS\u003C/strong> kullanarak \u003Cstrong>temel animasyonlar\u003C/strong> ve \u003Cstrong>hover efektleri\u003C/strong> ile nasıl etkileyici \u003Cstrong>frontend tasarım\u003C/strong>lar oluşturabileceğinizi, pratik \u003Cstrong>snippetler\u003C/strong> eşliğinde anlatıyoruz.","/blog/css-animasyon-mini-ornekleri/temel-css-animasyonlariyla-etkilesim-hover-efektleri-ve-snippetlerle-frontende","2026-01-03T10:22:25.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"f5be875aabc22f3f457397f39716c51f.jpg","f5be875aabc22f3f457397f39716c51f_thumb.jpg","f5be875aabc22f3f457397f39716c51f.webp","f5be875aabc22f3f457397f39716c51f_thumb.webp",{"id":147,"title":148,"summary":149,"slug":150,"createdAt":151,"updatedAt":151,"blog_categories":152,"authors":153,"image":154,"thumb":155,"image_webp":156,"thumb_webp":157,"rating":25},4552,"Temel CSS Animasyonlarıyla Web Tasarımında Hareketlilik Yaratın","CSS temel animasyon teknikleri ve snippetler ile web tasarımınıza canlılık katmanın yollarını keşfedin. Kaydırma efektleri ve hover animasyonlarıyla kullanıcı deneyimini geliştirin.","/blog/css-animasyon-mini-ornekleri/temel-css-animasyonlariyla-web-tasariminda-hareketlilik-yaratin","2025-12-05T05:30:38.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"863ae90ae692be457da8551151927ff8.jpg","863ae90ae692be457da8551151927ff8_thumb.jpg","863ae90ae692be457da8551151927ff8.webp","863ae90ae692be457da8551151927ff8_thumb.webp",{"id":159,"title":112,"summary":160,"slug":114,"createdAt":161,"updatedAt":161,"blog_categories":162,"authors":163,"image":164,"thumb":165,"image_webp":166,"thumb_webp":167,"rating":25},4551,"CSS animasyon ve hover efektleri kullanarak web tasarımlarınızı nasıl daha canlı ve etkileşimli hale getirebileceğinizi keşfedin. Tasarım ipuçları ve mini örneklerle hemen uygulamaya başlayın.","2025-12-04T05:30:33.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"cb9150fbee426330fb819c160cd1160a.jpg","cb9150fbee426330fb819c160cd1160a_thumb.jpg","cb9150fbee426330fb819c160cd1160a.webp","cb9150fbee426330fb819c160cd1160a_thumb.webp",["Reactive",169],{"title":14,"subTitle":170},"Blog",13,["Reactive",173],{"title":174,"meta":175,"link":212},"CSS Animasyon Snippetleri",[176,179,182,185,188,191,194,197,200,203,206,208,210],{"hid":177,"name":177,"content":178},"description","Başlangıç için CSS animasyon örnekleri.",{"hid":180,"name":180,"content":181},"keywords","css,animasyon,hover,başlangıç",{"hid":183,"name":183,"content":184},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":186,"name":186,"content":187},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":189,"property":189,"content":190},"og:type","website",{"hid":192,"property":192,"content":193},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":195,"property":195,"content":196},"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":198,"property":198,"content":199},"og:image","https://kodogreniyorum.comundefined",{"hid":201,"property":201,"content":202},"og:url","https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri",{"hid":204,"name":204,"content":205},"twitter:card","summary_large_image",{"hid":207,"name":207,"content":193},"twitter:title",{"hid":209,"name":209,"content":196},"twitter:description",{"hid":211,"name":211,"content":199},"twitter:image",[213,215],{"rel":214,"href":202},"canonical",{"rel":216,"href":217},"amphtml","https://amp.kodogreniyorum.com/blog/css-animasyon-mini-ornekleri",["Reactive",219],{"@context":220,"@graph":221},"https://schema.org",[222,326],{"@type":170,"name":174,"description":178,"url":223,"mainEntity":224},"https://kodogreniyorum.com/blog",{"@type":225,"itemListOrder":226,"numberOfItems":171,"itemListElement":227},"ItemList","https://schema.org/ItemListOrderDescending",[228,244,251,258,265,272,279,286,293,300,307,314,321],{"@type":229,"position":230,"url":231,"item":232},"ListItem",1,"https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/basit-css-animasyonlari-hover-ve-transition-ornekleri-ile-performans-odakli-tas",{"@type":233,"headline":8,"image":234,"datePublished":11,"dateModified":11,"author":235,"publisher":238},"BlogPosting","https://kodogreniyorum.com/media/blog/undefined",{"@type":236,"name":18,"url":237},"Person","https://kodogreniyorum.com/yazarlar/onur-tekin",{"@type":239,"logo":240},"Organization",{"@type":241,"url":242,"width":243,"height":243},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":229,"position":245,"url":246,"item":247},2,"https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/css-hover-animasyonlariyla-canlandirma-tasarimda-basit-snippetlerle-etkileyici",{"@type":233,"headline":28,"image":234,"datePublished":31,"dateModified":31,"author":248,"publisher":249},{"@type":236,"name":18,"url":237},{"@type":239,"logo":250},{"@type":241,"url":242,"width":243,"height":243},{"@type":229,"position":252,"url":253,"item":254},3,"https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/css-hover-animasyonlariyla-etkilesim-web-tasarimda-dinamik-dokunuslar",{"@type":233,"headline":40,"image":234,"datePublished":43,"dateModified":43,"author":255,"publisher":256},{"@type":236,"name":18,"url":237},{"@type":239,"logo":257},{"@type":241,"url":242,"width":243,"height":243},{"@type":229,"position":259,"url":260,"item":261},4,"https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/css-animasyonlari-hover-gecis-ve-basit-keyframe-ornekleri",{"@type":233,"headline":52,"image":234,"datePublished":55,"dateModified":55,"author":262,"publisher":263},{"@type":236,"name":18,"url":237},{"@type":239,"logo":264},{"@type":241,"url":242,"width":243,"height":243},{"@type":229,"position":266,"url":267,"item":268},5,"https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/temel-css-animasyon-kod-ornekleri-ile-baslangic-seviyesi-ogrenin",{"@type":233,"headline":64,"image":234,"datePublished":67,"dateModified":67,"author":269,"publisher":270},{"@type":236,"name":18,"url":237},{"@type":239,"logo":271},{"@type":241,"url":242,"width":243,"height":243},{"@type":229,"position":273,"url":274,"item":275},6,"https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/basit-css-animasyonlari-hover-transition-ve-keyframe-ornekleri",{"@type":233,"headline":76,"image":234,"datePublished":79,"dateModified":79,"author":276,"publisher":277},{"@type":236,"name":18,"url":237},{"@type":239,"logo":278},{"@type":241,"url":242,"width":243,"height":243},{"@type":229,"position":280,"url":281,"item":282},7,"https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/css-animasyonlari-hover-efektleri-ve-temel-keyframes-ornekleri",{"@type":233,"headline":88,"image":234,"datePublished":91,"dateModified":91,"author":283,"publisher":284},{"@type":236,"name":18,"url":237},{"@type":239,"logo":285},{"@type":241,"url":242,"width":243,"height":243},{"@type":229,"position":287,"url":288,"item":289},8,"https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/hover-ve-keyframe-animasyonlari-kolay-kod-ornekleriyle-basit-css-rehberi",{"@type":233,"headline":100,"image":234,"datePublished":103,"dateModified":103,"author":290,"publisher":291},{"@type":236,"name":18,"url":237},{"@type":239,"logo":292},{"@type":241,"url":242,"width":243,"height":243},{"@type":229,"position":294,"url":295,"item":296},9,"https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/hover-efektleriyle-canli-tasarimlar-css-animasyon-mini-ornekleriyle-yaraticilig",{"@type":233,"headline":112,"image":234,"datePublished":115,"dateModified":115,"author":297,"publisher":298},{"@type":236,"name":18,"url":237},{"@type":239,"logo":299},{"@type":241,"url":242,"width":243,"height":243},{"@type":229,"position":301,"url":302,"item":303},10,"https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/temel-css-animasyonlariyla-web-tasariminda-hareketlilik-yaratma",{"@type":233,"headline":124,"image":234,"datePublished":127,"dateModified":127,"author":304,"publisher":305},{"@type":236,"name":18,"url":237},{"@type":239,"logo":306},{"@type":241,"url":242,"width":243,"height":243},{"@type":229,"position":308,"url":309,"item":310},11,"https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/temel-css-animasyonlariyla-etkilesim-hover-efektleri-ve-snippetlerle-frontende",{"@type":233,"headline":136,"image":234,"datePublished":139,"dateModified":139,"author":311,"publisher":312},{"@type":236,"name":18,"url":237},{"@type":239,"logo":313},{"@type":241,"url":242,"width":243,"height":243},{"@type":229,"position":315,"url":316,"item":317},12,"https://kodogreniyorum.com/blog/css-animasyon-mini-ornekleri/temel-css-animasyonlariyla-web-tasariminda-hareketlilik-yaratin",{"@type":233,"headline":148,"image":234,"datePublished":151,"dateModified":151,"author":318,"publisher":319},{"@type":236,"name":18,"url":237},{"@type":239,"logo":320},{"@type":241,"url":242,"width":243,"height":243},{"@type":229,"position":171,"url":295,"item":322},{"@type":233,"headline":112,"image":234,"datePublished":161,"dateModified":161,"author":323,"publisher":324},{"@type":236,"name":18,"url":237},{"@type":239,"logo":325},{"@type":241,"url":242,"width":243,"height":243},{"@type":327,"itemListElement":328},"BreadcrumbList",[329,332,333],{"@type":229,"position":230,"name":330,"item":331},"Ana Sayfa","https://kodogreniyorum.com",{"@type":229,"position":245,"name":170,"item":223},{"@type":229,"position":252,"name":14,"item":202}]