{"id":180,"date":"2014-01-28T22:21:58","date_gmt":"2014-01-28T20:21:58","guid":{"rendered":"http:\/\/blog.okanacar.com.tr\/?p=180"},"modified":"2018-10-25T02:27:33","modified_gmt":"2018-10-24T23:27:33","slug":"transitions","status":"publish","type":"post","link":"https:\/\/okanacar.com.tr\/blog\/?p=180","title":{"rendered":"Transitions"},"content":{"rendered":"

Belki CSS3 ile gelen en g\u00fczel \u00f6rneklerden birisi. Art\u0131k herhangi bir flash animasyon ya da javascript olmadan CSS ile efekt vermek m\u00fcmk\u00fcn. Bunu yaparken sadece de\u011fi\u015fiklik yap\u0131lmak istenen CSS \u00f6zelli\u011fini ve bunun yan\u0131nda da bu \u00f6zellik i\u00e7in saniye cinsinden s\u00fcrenin belirtilmesi yetiyor.<\/p>\n

\u00d6rnek<\/strong><\/p>\n

<head>\r\n<style type=\"text\/css\">\r\n.oknpc{\r\n  width:150px;\r\n  height:150px;\r\n  background:#dddddd;\r\n  transition:width 2s,height 2s;\r\n  -webkit-transition:width 2s, height 2s, -webkit-trans-form 2s;\r\n  -o-transition:width: 2s, height 2s, -o-transform 2s;\r\n}\r\n.oknpc:hover{\r\n  cursor:pointer;\r\n  width:250px;\r\n  height:250px;\r\n  transform:rotate(90deg);\r\n  -webkit-transform:rotade(90deg);\r\n  o-otransform:rotate(90deg);\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n  <div class=\"oknpc\">Trasition Efekt<\/div>\r\n<\/body><\/pre>\n
<\/p>\n
\u00a0Not: IE ve Firefox’ta transition \u00f6zelli\u011finin deste\u011fi bulunmamaktad\u0131r.Chrome ve Safari i\u00e7in -webkit, Opera i\u00e7in -o prefix’i kullan\u0131lmaktad\u0131r.<\/p><\/blockquote>\n
\u00a0Destekleyen Taray\u0131c\u0131lar
\n<\/strong>\u00a0Chrome , Opera , Safari<\/p>\n
DEMO<\/span><\/a><\/span><\/h1>\n","protected":false},"excerpt":{"rendered":"
Belki CSS3 ile gelen en g\u00fczel \u00f6rneklerden birisi. Art\u0131k herhangi bir flash animasyon ya da javascript olmadan CSS ile efekt vermek m\u00fcmk\u00fcn. Bunu yaparken sadece de\u011fi\u015fiklik yap\u0131lmak istenen CSS \u00f6zelli\u011fini ve bunun yan\u0131nda da bu \u00f6zellik i\u00e7in saniye cinsinden s\u00fcrenin belirtilmesi yetiyor. \u00d6rnek <head> <style type=”text\/css”> .oknpc{ width:150px; height:150px; background:#dddddd; transition:width 2s,height 2s; -webkit-transition:width 2s, …<\/p>\n","protected":false},"author":1,"featured_media":336,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[44,46,45],"_links":{"self":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts\/180"}],"collection":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=180"}],"version-history":[{"count":9,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts\/180\/revisions"}],"predecessor-version":[{"id":337,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts\/180\/revisions\/337"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/media\/336"}],"wp:attachment":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}