{"id":33999,"date":"2025-11-09T20:41:34","date_gmt":"2025-11-09T17:41:34","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=33999"},"modified":"2025-11-09T20:41:34","modified_gmt":"2025-11-09T17:41:34","slug":"css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/","title":{"rendered":"CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi"},"content":{"rendered":"<p><body><\/p>\n<h2>CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi<\/h2>\n<p>Web tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmenin ve aray\u00fczleri daha ak\u0131c\u0131 hale getirmenin temel yollar\u0131ndan biri CSS ge\u00e7i\u015flerini (transitions) kullanmakt\u0131r. CSS ge\u00e7i\u015fleri, bir elementin bir durumdan ba\u015fka bir duruma aniden atlamak yerine, belirli bir s\u00fcre i\u00e7inde yumu\u015fak bir \u015fekilde de\u011fi\u015fmesini sa\u011flar. \u00d6rne\u011fin, bir d\u00fc\u011fmenin \u00fczerine gelindi\u011finde renginin veya boyutunun aniden de\u011fil, zarif bir animasyonla de\u011fi\u015fmesi gibi. Bu t\u00fcr mikroskobik etkile\u015fimler, sitenizin daha modern, profesyonel ve kullan\u0131c\u0131 dostu hissetmesini sa\u011flar.<\/p>\n<p>CSS <code>transition<\/code> \u00f6zelli\u011fi, bu ge\u00e7i\u015fleri tan\u0131mlamak i\u00e7in kullan\u0131lan bir k\u0131saltma (shorthand) \u00f6zelli\u011fidir. Bu k\u0131saltma, ge\u00e7i\u015fin hangi CSS \u00f6zelli\u011fini etkileyece\u011fini, ne kadar s\u00fcrece\u011fini, hangi h\u0131z e\u011frisini takip edece\u011fini ve ne kadar gecikmeyle ba\u015flayaca\u011f\u0131n\u0131 tek bir sat\u0131rda belirtmenize olanak tan\u0131r. K\u0131saltma \u00f6zelli\u011fi kullanmak, kodunuzu daha okunabilir, daha k\u0131sa ve y\u00f6netimi daha kolay hale getirir. Tek tek uzun yaz\u0131m \u00f6zelliklerini (<code>transition-property<\/code>, <code>transition-duration<\/code>, <code>transition-timing-function<\/code>, <code>transition-delay<\/code>) kullanmak yerine, <code>transition<\/code> k\u0131saltmas\u0131yla bu d\u00f6rt parametreyi bir arada tan\u0131mlayabiliriz. Bu rehberde, <code>transition<\/code> k\u0131saltma \u00f6zelli\u011finin t\u00fcm y\u00f6nlerini, bile\u015fenlerini, kullan\u0131m\u0131n\u0131 ve pratik ipu\u00e7lar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n<h2>Transition K\u0131saltma \u00d6zelli\u011finin Bile\u015fenleri: Uzun Yaz\u0131m \u00d6zellikleri<\/h2>\n<p><code>transition<\/code> k\u0131saltma \u00f6zelli\u011fi, d\u00f6rt farkl\u0131 uzun yaz\u0131m \u00f6zelli\u011finin birle\u015fimidir. Bu \u00f6zelliklerin her birini ayr\u0131 ayr\u0131 anlamak, k\u0131saltmay\u0131 daha etkili kullanman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<h3>transition-property<\/h3>\n<p>Bu \u00f6zellik, hangi CSS \u00f6zelli\u011finin ge\u00e7i\u015fe tabi tutulaca\u011f\u0131n\u0131 belirtir. Yani, hangi \u00f6zelli\u011fin de\u011ferindeki de\u011fi\u015fikli\u011fin animasyonlu olaca\u011f\u0131n\u0131 tan\u0131mlar.<\/p>\n<ul>\n<li><code>all<\/code>: Varsay\u0131lan de\u011ferdir. T\u00fcm de\u011fi\u015ftirilebilir CSS \u00f6zelliklerinin ge\u00e7i\u015f yapmas\u0131n\u0131 sa\u011flar. Genellikle pratik kullan\u0131mda tercih edilir, ancak performans kritik durumlarda belirli \u00f6zellikleri hedeflemek daha iyidir.<\/li>\n<li><code>none<\/code>: Hi\u00e7bir \u00f6zelli\u011fin ge\u00e7i\u015f yapmamas\u0131n\u0131 sa\u011flar.<\/li>\n<li><code><CSS \u00f6zelli\u011fi ad\u0131><\/code>: Belirli bir CSS \u00f6zelli\u011fini (\u00f6rne\u011fin, <code>background-color<\/code>, <code>width<\/code>, <code>opacity<\/code>, <code>transform<\/code>) hedefleyebilirsiniz. Birden fazla \u00f6zellik i\u00e7in virg\u00fclle ayr\u0131lm\u0131\u015f bir liste kullanabilirsiniz.<\/li>\n<\/ul>\n<pre><code class=\"language-css\">\/<em> \u00d6rnekler <\/em>\/\n.element {\n    transition-property: all; \/<em> T\u00fcm \u00f6zellikler <\/em>\/\n}\n\n.button {\n    transition-property: background-color; \/<em> Sadece arka plan rengi <\/em>\/\n}\n\n.card {\n    transition-property: width, height, opacity; \/<em> Geni\u015flik, y\u00fckseklik ve opakl\u0131k <\/em>\/\n}\n<\/code><\/pre>\n<h3>transition-duration<\/h3>\n<p>Ge\u00e7i\u015fin ne kadar s\u00fcrece\u011fini belirtir. Bu de\u011fer, ge\u00e7i\u015fin ba\u015flang\u0131c\u0131ndan biti\u015fine kadar ge\u00e7en s\u00fcredir.<\/p>\n<ul>\n<li><code><s\u00fcre><\/code>: Saniye (<code>s<\/code>) veya milisaniye (<code>ms<\/code>) cinsinden bir de\u011fer al\u0131r. Varsay\u0131lan de\u011feri <code>0s<\/code>&#8216;dir, yani an\u0131nda bir ge\u00e7i\u015f olur.<\/li>\n<\/ul>\n<pre><code class=\"language-css\">\/<em> \u00d6rnekler <\/em>\/\n.element {\n    transition-duration: 0.5s; \/<em> Yar\u0131m saniye <\/em>\/\n}\n\n.button {\n    transition-duration: 300ms; \/<em> 300 milisaniye <\/em>\/\n}\n<\/code><\/pre>\n<h3>transition-timing-function<\/h3>\n<p>Ge\u00e7i\u015fin h\u0131z e\u011frisini (ivmesini) tan\u0131mlar. Bu, ge\u00e7i\u015fin ba\u015flang\u0131c\u0131ndan sonuna kadar nas\u0131l h\u0131zlan\u0131p yava\u015flayaca\u011f\u0131n\u0131 belirler ve kullan\u0131c\u0131ya daha do\u011fal bir his verir.<\/p>\n<ul>\n<li><code>ease<\/code>: Varsay\u0131lan de\u011ferdir. Yava\u015f ba\u015flar, ortada h\u0131zlan\u0131r ve yava\u015f biter. \u00c7o\u011fu durum i\u00e7in iyi bir se\u00e7imdir.<\/li>\n<li><code>linear<\/code>: Ge\u00e7i\u015f boyunca sabit h\u0131zda ilerler.<\/li>\n<li><code>ease-in<\/code>: Yava\u015f ba\u015flar ve sona do\u011fru h\u0131zlan\u0131r.<\/li>\n<li><code>ease-out<\/code>: H\u0131zl\u0131 ba\u015flar ve sona do\u011fru yava\u015flar.<\/li>\n<li><code>ease-in-out<\/code>: Yava\u015f ba\u015flar, h\u0131zlan\u0131r ve sonra tekrar yava\u015f biter. <code>ease<\/code>&#8216;e benzer ancak daha belirgin bir yava\u015flama ve h\u0131zlanma g\u00f6sterir.<\/li>\n<li><code>cubic-bezier(<n>, <n>, <n>, <n>)<\/code>: \u00d6zel bir h\u0131z e\u011frisi tan\u0131mlaman\u0131za olanak tan\u0131r. D\u00f6rt say\u0131sal de\u011fer al\u0131r ve 0 ile 1 aras\u0131nda olmal\u0131d\u0131r.<\/li>\n<li><code>steps(<ad\u0131m say\u0131s\u0131>, [start | end])<\/code>: Ge\u00e7i\u015fi belirli say\u0131da ad\u0131ma b\u00f6ler, animasyonu kesintili bir \u015fekilde yapar.<\/li>\n<\/ul>\n<pre><code class=\"language-css\">\/<em> \u00d6rnekler <\/em>\/\n.element {\n    transition-timing-function: ease;\n}\n\n.button {\n    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);\n}\n<\/code><\/pre>\n<h3>transition-delay<\/h3>\n<p>Ge\u00e7i\u015fin ne kadar s\u00fcre sonra ba\u015flayaca\u011f\u0131n\u0131 belirtir. Bir olay tetiklendikten sonra (\u00f6rne\u011fin, fare \u00fczerine gelindi\u011finde) ge\u00e7i\u015fin hemen ba\u015flamas\u0131 yerine belirli bir s\u00fcre beklemesini sa\u011flar.<\/p>\n<ul>\n<li><code><s\u00fcre><\/code>: Saniye (<code>s<\/code>) veya milisaniye (<code>ms<\/code>) cinsinden bir de\u011fer al\u0131r. Varsay\u0131lan de\u011feri <code>0s<\/code>&#8216;dir, yani gecikme olmadan hemen ba\u015flar.<\/li>\n<\/ul>\n<pre><code class=\"language-css\">\/<em> \u00d6rnekler <\/em>\/\n.element {\n    transition-delay: 0.2s; \/<em> 200 milisaniye gecikme <\/em>\/\n}\n\n.button {\n    transition-delay: 1s; \/<em> 1 saniye gecikme <\/em>\/\n}\n<\/code><\/pre>\n<h2>CSS <code>transition<\/code> K\u0131saltma \u00d6zelli\u011finin Kullan\u0131m\u0131 ve S\u00f6z Dizimi<\/h2>\n<p><code>transition<\/code> k\u0131saltma \u00f6zelli\u011fi, yukar\u0131da a\u00e7\u0131klanan d\u00f6rt uzun yaz\u0131m \u00f6zelli\u011fini tek bir CSS bildirimiyle tan\u0131mlaman\u0131z\u0131 sa\u011flar. S\u00f6z dizimi \u015fu \u015fekildedir:<\/p>\n<pre><code class=\"language-css\">transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;\n<\/code><\/pre>\n<p>Parametrelerin s\u0131ras\u0131 genellikle bu \u015fekildedir, ancak <code>duration<\/code> ve <code>delay<\/code> de\u011ferleri i\u00e7in \u00f6zel bir durum vard\u0131r: e\u011fer iki zaman de\u011feri (\u00f6rne\u011fin, <code>0.5s<\/code> ve <code>1s<\/code>) belirtilirse, ilk de\u011fer <code>duration<\/code> (s\u00fcre) olarak, ikinci de\u011fer <code>delay<\/code> (gecikme) olarak yorumlan\u0131r. E\u011fer sadece bir zaman de\u011feri belirtilirse, bu <code>duration<\/code> olarak kabul edilir ve <code>delay<\/code> varsay\u0131lan olarak <code>0s<\/code> olur.<\/p>\n<h3>En Basit Kullan\u0131m<\/h3>\n<p>Sadece t\u00fcm \u00f6zelliklerin belirli bir s\u00fcre i\u00e7inde yumu\u015fak bir \u015fekilde de\u011fi\u015fmesini istiyorsan\u0131z:<\/p>\n<pre><code class=\"language-css\">.my-element {\n    transition: all 0.3s ease-in-out;\n}\n\n.my-element:hover {\n    background-color: #ffcc00;\n    transform: scale(1.1);\n}\n<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>my-element<\/code> \u00fczerine gelindi\u011finde <code>background-color<\/code> ve <code>transform<\/code> \u00f6zellikleri 0.3 saniye i\u00e7inde <code>ease-in-out<\/code> h\u0131z e\u011frisiyle de\u011fi\u015fecektir.<\/p>\n<h3>T\u00fcm Parametrelerle Kullan\u0131m<\/h3>\n<p>Daha fazla kontrol i\u00e7in t\u00fcm parametreleri belirtebilirsiniz:<\/p>\n<pre><code class=\"language-css\">.my-button {\n    background-color: #007bff;\n    color: white;\n    padding: 10px 20px;\n    border: none;\n    cursor: pointer;\n    transition: background-color 0.4s ease-out 0.1s; \/<em> property duration timing-function delay <\/em>\/\n}\n\n.my-button:hover {\n    background-color: #0056b3;\n}\n<\/code><\/pre>\n<p>Burada, <code>my-button<\/code>&#8216;\u0131n <code>background-color<\/code> \u00f6zelli\u011fi 0.4 saniye s\u00fcrecek, <code>ease-out<\/code> h\u0131z e\u011frisiyle ve 0.1 saniye gecikmeyle de\u011fi\u015fecektir.<\/p>\n<h3>\u00d6zellikleri Atlamak ve Varsay\u0131lan De\u011ferler<\/h3>\n<p>Baz\u0131 \u00f6zellikler atlanabilir ve varsay\u0131lan de\u011ferleri kullan\u0131l\u0131r. \u00d6rne\u011fin, <code>transition-timing-function<\/code> belirtilmezse <code>ease<\/code> kullan\u0131l\u0131r; <code>transition-delay<\/code> belirtilmezse <code>0s<\/code> kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-css\">.my-box {\n    width: 100px;\n    height: 100px;\n    background-color: lightblue;\n    transition: width 0.5s; \/<em> property duration (timing-function ve delay varsay\u0131lan) <\/em>\/\n}\n\n.my-box:hover {\n    width: 200px;\n}\n<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>width<\/code> \u00f6zelli\u011fi 0.5 saniye i\u00e7inde <code>ease<\/code> (varsay\u0131lan) h\u0131z e\u011frisiyle ve gecikme olmadan de\u011fi\u015fecektir.<\/p>\n<h2>Pratik Uygulamalar, \u00c7oklu Ge\u00e7i\u015fler ve \u0130pu\u00e7lar\u0131<\/h2>\n<p><code>transition<\/code> k\u0131saltma \u00f6zelli\u011fi, web aray\u00fczlerinde bir\u00e7ok dinamik ve etkile\u015fimli efekt olu\u015fturmak i\u00e7in kullan\u0131labilir.<\/p>\n<h3>Tekil Ge\u00e7i\u015f \u00d6rnekleri<\/h3>\n<h4>D\u00fc\u011fme \u00dczerine Gelme Etkisi<\/h4>\n<pre><code class=\"language-css\">.action-button {\n    background-color: #28a745;\n    color: white;\n    padding: 12px 25px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    font-size: 16px;\n    transition: background-color 0.3s ease, transform 0.2s ease-out; \/<em> Birden fazla ge\u00e7i\u015f <\/em>\/\n}\n\n.action-button:hover {\n    background-color: #218838; \/<em> Koyu ye\u015fil <\/em>\/\n    transform: translateY(-2px); \/<em> Hafif\u00e7e yukar\u0131 kayd\u0131r <\/em>\/\n}\n\n.action-button:active {\n    transform: translateY(0); \/<em> T\u0131klamada eski yerine d\u00f6n <\/em>\/\n}\n<\/code><\/pre>\n<h4>G\u00f6rsel Kart B\u00fcy\u00fctme Etkisi<\/h4>\n<pre><code class=\"language-css\">.image-card {\n    width: 200px;\n    height: 150px;\n    background-color: #f0f0f0;\n    border: 1px solid #ddd;\n    margin: 10px;\n    overflow: hidden;\n    transition: transform 0.4s ease-in-out;\n}\n\n.image-card img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.4s ease-in-out;\n}\n\n.image-card:hover {\n    transform: translateY(-5px); \/<em> Hafif\u00e7e yukar\u0131 kayd\u0131r <\/em>\/\n}\n\n.image-card:hover img {\n    transform: scale(1.05); \/<em> Resmi %5 b\u00fcy\u00fct <\/em>\/\n}\n<\/code><\/pre>\n<h3>\u00c7oklu Ge\u00e7i\u015fler<\/h3>\n<p>Bir elementin birden fazla \u00f6zelli\u011finin farkl\u0131 s\u00fcreler, gecikmeler veya h\u0131z e\u011frileri ile ge\u00e7i\u015f yapmas\u0131n\u0131 isteyebilirsiniz. Bu durumda, <code>transition<\/code> k\u0131saltma \u00f6zelli\u011fi i\u00e7inde virg\u00fclle ayr\u0131lm\u0131\u015f bir liste kullanabilirsiniz.<\/p>\n<pre><code class=\"language-css\">.multi-transition-box {\n    width: 100px;\n    height: 100px;\n    background-color: #007bff;\n    border: 2px solid #0056b3;\n    margin: 20px;\n    transition: \n        width 0.5s ease-out, \/<em> Geni\u015flik 0.5s <\/em>\/\n        background-color 0.8s linear 0.2s, \/<em> Arka plan rengi 0.8s, 0.2s gecikmeli <\/em>\/\n        transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); \/<em> Transform 0.3s, \u00f6zel e\u011fri <\/em>\/\n}\n\n.multi-transition-box:hover {\n    width: 200px;\n    background-color: #dc3545;\n    transform: rotate(15deg) scale(1.2);\n}\n<\/code><\/pre>\n<p>Bu \u00f6rnekte, kutunun geni\u015fli\u011fi, arka plan rengi ve d\u00f6n\u00fc\u015f\u00fcm\u00fc farkl\u0131 s\u00fcrelerde ve farkl\u0131 h\u0131z e\u011frileriyle ge\u00e7i\u015f yapmaktad\u0131r.<\/p>\n<h3>Performans \u0130pu\u00e7lar\u0131<\/h3>\n<ul>\n<li><strong><code>transform<\/code> ve <code>opacity<\/code> Kullan\u0131n:<\/strong> M\u00fcmk\u00fcn oldu\u011funca <code>transform<\/code> (<code>translate<\/code>, <code>scale<\/code>, <code>rotate<\/code>) ve <code>opacity<\/code> \u00f6zelliklerini ge\u00e7i\u015fler i\u00e7in kullanmaya \u00e7al\u0131\u015f\u0131n. Bu \u00f6zellikler genellikle GPU taraf\u0131ndan h\u0131zland\u0131r\u0131l\u0131r ve daha ak\u0131c\u0131 animasyonlar sa\u011flar.<\/li>\n<li><strong>Layout Tetikleyen \u00d6zelliklerden Ka\u00e7\u0131n\u0131n:<\/strong> <code>width<\/code>, <code>height<\/code>, <code>margin<\/code>, <code>padding<\/code>, <code>top<\/code>, <code>left<\/code> gibi \u00f6zelliklerin animasyonu, taray\u0131c\u0131n\u0131n d\u00fczeni (layout) yeniden hesaplamas\u0131na neden olabilir, bu da \u00f6zellikle b\u00fcy\u00fck veya \u00e7ok say\u0131da \u00f6\u011fe \u00fczerinde performans sorunlar\u0131na yol a\u00e7abilir. Mecbur kalmad\u0131k\u00e7a bu t\u00fcr \u00f6zellikler yerine <code>transform<\/code> kullanmay\u0131 deneyin (\u00f6rne\u011fin, <code>width<\/code> yerine <code>transform: scaleX()<\/code>).<\/li>\n<li><strong><code>all<\/code> Kullan\u0131m\u0131na Dikkat Edin:<\/strong> Genellikle <code>transition: all 0.3s ease;<\/code> kullanmak kolayd\u0131r, ancak elementin \u00e7ok say\u0131da de\u011fi\u015ftirilebilir \u00f6zelli\u011fi varsa, gereksiz performans y\u00fck\u00fcne neden olabilir. Yaln\u0131zca ge\u00e7i\u015f yapmas\u0131n\u0131 istedi\u011finiz belirli \u00f6zellikleri belirtmek daha performansl\u0131 olabilir.<\/li>\n<\/ul>\n<h3><code>all<\/code> Anahtar Kelimesi<\/h3>\n<p><code>transition-property<\/code> olarak <code>all<\/code> kullanmak, elementin herhangi bir de\u011fi\u015ftirilebilir CSS \u00f6zelli\u011finin de\u011ferindeki bir de\u011fi\u015fikli\u011fin ge\u00e7i\u015fe tabi tutulmas\u0131n\u0131 sa\u011flar. Bu, h\u0131zl\u0131 prototipleme veya basit ge\u00e7i\u015fler i\u00e7in kullan\u0131\u015fl\u0131d\u0131r. Ancak, belirli durumlarda daha kontroll\u00fc ve performansl\u0131 olmak i\u00e7in belirli \u00f6zellikleri hedeflemek daha iyidir.<\/p>\n<pre><code class=\"language-css\">.generic-element {\n    background-color: blue;\n    width: 100px;\n    height: 100px;\n    opacity: 1;\n    transition: all 0.5s ease; \/<em> T\u00fcm de\u011fi\u015ftirilebilir \u00f6zellikler <\/em>\/\n}\n\n.generic-element:hover {\n    background-color: red;\n    width: 120px;\n    height: 120px;\n    opacity: 0.7;\n}\n<\/code><\/pre>\n<h2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n<p>CSS <code>transition<\/code> k\u0131saltma \u00f6zelli\u011fi, modern ve etkile\u015fimli web aray\u00fczleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir ara\u00e7t\u0131r. D\u00f6rt temel uzun yaz\u0131m \u00f6zelli\u011fini (<code>transition-property<\/code>, <code>transition-duration<\/code>, <code>transition-timing-function<\/code>, <code>transition-delay<\/code>) tek bir sat\u0131rda birle\u015ftirerek, kodunuzu daha temiz ve y\u00f6netilebilir hale getirir. Tekil ge\u00e7i\u015flerden karma\u015f\u0131k \u00e7oklu ge\u00e7i\u015flere kadar geni\u015f bir yelpazede animasyonlar olu\u015fturman\u0131za olanak tan\u0131r. Performans ipu\u00e7lar\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurarak ve do\u011fru \u00f6zellikleri animasyon i\u00e7in se\u00e7erek, kullan\u0131c\u0131lar\u0131n\u0131za sorunsuz ve keyifli bir deneyim sunabilirsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<h4>Q1: <code>transition<\/code> ile <code>animation<\/code> aras\u0131ndaki fark nedir?<\/h4>\n<p><strong>A:<\/strong> <code>transition<\/code>, bir elementin iki farkl\u0131 durumu aras\u0131ndaki ge\u00e7i\u015fi tan\u0131mlar (\u00f6rne\u011fin, normal durumdan <code>:hover<\/code> durumuna). Genellikle bir kullan\u0131c\u0131 etkile\u015fimiyle tetiklenir ve sadece ba\u015flang\u0131\u00e7 ve biti\u015f noktalar\u0131 vard\u0131r. <code>animation<\/code> ise daha karma\u015f\u0131k, \u00e7ok ad\u0131ml\u0131 animasyonlar olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Otomatik olarak ba\u015flayabilir, d\u00f6ng\u00fcye girebilir ve birden fazla anahtar kare (<code>@keyframes<\/code>) tan\u0131mlayarak ara durumlar\u0131 kontrol etmenizi sa\u011flar.<\/p>\n<h4>Q2: Neden ge\u00e7i\u015fim \u00e7al\u0131\u015fm\u0131yor?<\/h4>\n<p><strong>A:<\/strong> Birka\u00e7 olas\u0131 neden olabilir:<\/p>\n<ol>\n<li>Ge\u00e7i\u015fi tetikleyecek bir durum de\u011fi\u015fikli\u011fi (\u00f6rne\u011fin, <code>:hover<\/code>, <code>:active<\/code>, JavaScript ile s\u0131n\u0131f ekleme) yok.<\/li>\n<li>Ge\u00e7i\u015f yap\u0131lan CSS \u00f6zelli\u011fi animasyon yap\u0131lamaz bir \u00f6zellik (\u00f6rne\u011fin, <code>display: none<\/code>&#8216;dan <code>display: block<\/code>&#8216;a ge\u00e7i\u015f yap\u0131lamaz).<\/li>\n<li><code>transition-duration<\/code> de\u011feri <code>0s<\/code> veya belirtilmemi\u015f.<\/li>\n<li>CSS se\u00e7iciniz yeterince \u00f6zg\u00fcl de\u011fil veya ba\u015fka bir kural ge\u00e7i\u015fi eziyor.<\/li>\n<li>Taray\u0131c\u0131 deste\u011fi sorunlar\u0131 (\u00e7ok eski taray\u0131c\u0131lar i\u00e7in).<\/li>\n<\/ol>\n<h4>Q3: <code>transition: all 0s;<\/code> kullanmak ne anlama gelir?<\/h4>\n<p><strong>A:<\/strong> Bu, t\u00fcm \u00f6zelliklerin ge\u00e7i\u015f s\u00fcresinin s\u0131f\u0131r saniye oldu\u011fu anlam\u0131na gelir. Yani, herhangi bir durum de\u011fi\u015fikli\u011fi an\u0131nda, animasyonsuz olarak ger\u00e7ekle\u015fecektir. Genellikle, bir elementin ge\u00e7i\u015flerini ge\u00e7ici olarak devre d\u0131\u015f\u0131 b\u0131rakmak istedi\u011finizde veya belirli bir anda anl\u0131k bir de\u011fi\u015fiklik yapmak istedi\u011finizde kullan\u0131l\u0131r.<\/p>\n<h4>Q4: Birden fazla \u00f6zelli\u011fi farkl\u0131 s\u00fcrelerle nas\u0131l ge\u00e7i\u015f yapar\u0131m?<\/h4>\n<p><strong>A:<\/strong> <code>transition<\/code> k\u0131saltma \u00f6zelli\u011finde virg\u00fclle ayr\u0131lm\u0131\u015f bir liste kullanarak bunu yapabilirsiniz. Her bir \u00f6\u011fe, farkl\u0131 bir \u00f6zellik ve onun ge\u00e7i\u015f parametrelerini tan\u0131mlar:<\/p>\n<pre><code class=\"language-css\">.my-element {\n    transition: width 0.3s ease-out, background-color 0.5s linear 0.1s;\n}\n<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>width<\/code> 0.3 saniyede <code>ease-out<\/code> ile de\u011fi\u015firken, <code>background-color<\/code> 0.5 saniyede <code>linear<\/code> ile ve 0.1 saniye gecikmeyle de\u011fi\u015fir.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi\nWeb tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmenin ve aray\u00fczleri daha ak\u0131c\u0131","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-33999","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi\" \/>\n<meta property=\"og:description\" content=\"CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi Web tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmenin ve aray\u00fczleri daha ak\u0131c\u0131\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-09T17:41:34+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi\",\"datePublished\":\"2025-11-09T17:41:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/\"},\"wordCount\":1546,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/\",\"name\":\"CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-09T17:41:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi","og_description":"CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi Web tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmenin ve aray\u00fczleri daha ak\u0131c\u0131","og_url":"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-09T17:41:34+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"10 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi","datePublished":"2025-11-09T17:41:34+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/"},"wordCount":1546,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/","url":"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/","name":"CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-09T17:41:34+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-gecislerine-giris-ve-kisaltma-ozelliginin-onemi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Ge\u00e7i\u015flerine Giri\u015f ve K\u0131saltma \u00d6zelli\u011finin \u00d6nemi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33999","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33999"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33999\/revisions"}],"predecessor-version":[{"id":34000,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33999\/revisions\/34000"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}