{"id":1323,"date":"2013-10-19T15:10:27","date_gmt":"2013-10-19T15:10:27","guid":{"rendered":"http:\/\/www.phpmind.com\/blog\/?p=1323"},"modified":"2017-06-16T04:47:32","modified_gmt":"2017-06-16T04:47:32","slug":"how-to-use-css3-transitions","status":"publish","type":"post","link":"https:\/\/www.phpmind.com\/blog\/2013\/10\/how-to-use-css3-transitions\/","title":{"rendered":"How to Use CSS3 Transitions ?"},"content":{"rendered":"<ul>\n<li><span class=\"phpmind_text_heading_green\">transition: <\/span>\n<p>On this property, effect take place in an element smoothly over a given time period. Specifying duration is compulsory to see the effect. We need to specify transition-property, transition-duration, transition-timing-function and finally transition-delay.<\/p>\n<p>Web designers can easily provide beautiful effects with the help of transition withoutusing jquery.<\/p>\n<div id=\"phpmind_transition_box\">\n<div id=\"phpmind_transition_center\"><\/div>\n<div class=\"phpmind_transition_img1\"><\/div>\n<div class=\"phpmind_transition_img2\"><\/div>\n<div class=\"phpmind_transition_img3\"><\/div>\n<div class=\"phpmind_transition_img4\"><\/div>\n<p class=\"phpmind_blue_link\"> Hover<\/p>\n<\/p><\/div>\n<\/li>\n<li>\n<p>Browser support: Firefox, Chrome, Opera, IE10+, and Safari. Add prefix -webkit- for chrome 25 and its earlier versions and safari.<br \/>\n        Add prefix -moz- for firefox.<br \/>\n        Add prefix -ms- for IE.\n\t\t<\/p>\n<\/li>\n<li>\n<ol>\n<li><span class=\"phpmind_text_heading_green\">Transition-properties: <\/span>Lists the properties which you need to be transitioned. Some properties which can be trasitioned are border, font-size, background-color, line-height, letter spacing etc. Whole list of the properties is mentioned on the w3c website.\n<pre lang=\"php\">\r\n.div\r\n{ \r\nborder-radius:90px; \r\nwidth:120px; \r\nheight:120px; \r\nbackground:#F60;\r\n}\r\n.div:hover\r\n{ \r\nwidth:150px;\r\nheight:150px;\r\ntransition-property:width;\r\n-webkit-transition-property: width, height; \/* Safari *\/\r\n-moz-transition-property: width, height; \/* Firefox 4 *\/\r\n-o-transition-property:width, height; \/* Opera *\/\r\ntransition-duration: 3s;\r\n-webkit-transition-duration: 3s; \/* Safari *\/\r\n}\r\n<\/pre>\n<div class=\"phpmind_transition_transitioneffect_main\">\n<div class=\"phpmind_transition_transitioneffect\"><\/div>\n<\/p><\/div>\n<p class=\"phpmind_blue_link_left\">hover<\/p>\n<p>Here transition property is applies to width and height.<\/p>\n<\/li>\n<li><span class=\"phpmind_text_heading_green\">Transition-duration: <\/span>This sets the time or the duration of the effect.\n            <\/li>\n<li><span class=\"phpmind_text_heading_green\">Transition-timing-function: <\/span>Six options are available in this function. Ease, ease-in, ease-out, linear, ease-in-out and cubic-bezier. By default ease is selected. You can use cubic bezier if you are looking for very fine effect. It helps you to choose your own value for the effect.\n<ol>\n<li>\n                Linear: Animation carries same speed from start to an end.<\/p>\n<div class=\"phpmind_transition_linear\"><span class=\"phpmind_css3_transition_span\">Linear<\/span><\/div>\n<\/li>\n<li>\n                Ease: Speed is fast in the begining and slow down at the end.<\/p>\n<div class=\"phpmind_transition_ease\"><span class=\"phpmind_css3_transition_span\">Ease<\/span><\/div>\n<\/li>\n<li>\n                 Ease-out: Ease-out is quite similar to the ease. But it is slower in beginning in comparison to ease.<\/p>\n<div class=\"phpmind_transition_ease_out\"><span class=\"phpmind_css3_transition_span\">Ease-out<\/span><\/div>\n<\/li>\n<li>Ease-in: Ease-in gives the smooth effect to the animation.\n<div class=\"phpmind_transition_ease_in\"><span class=\"phpmind_css3_transition_span\">Ease-in<\/span><\/div>\n<\/li>\n<li>Ease-in-out: Speed of an animation is slow in the beginning and at the end.\n<div class=\"phpmind_transition_ease_in_out\"><span class=\"phpmind_css3_transition_span\">Ease-in-out<\/span><\/div>\n<\/li>\n<li>Cubic-bezier: The function can be customized by using the values of your own.\n<div class=\"phpmind_transition_cubic_bezier\"><span class=\"phpmind_css3_transition_span\">Cubic-bezier<\/span><\/div>\n<\/li>\n<\/ol>\n<\/li>\n<li><span class=\"phpmind_text_heading_green\">transition-delay: <\/span>This function sets the time before animation begins.\n<pre lang=\"php\">\r\n.div\r\n{\r\nposition:absolute;\r\nleft:0;\r\nopacity: 1;\r\ntransition: opacity 2s ease-in 2s;\r\n-o-transition: opacity 2s ease-in  2s;\r\n-webkit-transition: opacity 2s ease-in 2s;\r\n-moz-transition: opacity 2s ease-in 2s;\r\n-ms-transition: opacity 2s ease-in 2s;\t\t\t\t\r\n}\r\n<\/pre>\n<div class=\"phpmind_css3_transition_fading\">\n\t\t\t  <img decoding=\"async\" class=\"phpmind_css3_transition_img1\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/10\/keychain-1.jpg\"\/><br \/>\n\t\t\t  <img decoding=\"async\" class=\"phpmind_css3_transition_img2\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2013\/10\/rainy-leafs.jpg\"\/>\n\t\t\t<\/div>\n<p><\/p>\n<p> In the above example image fading starts after 2 seconds.<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>transition: On this property, effect take place in an element smoothly over a given time period. Specifying duration is compulsory to see the effect. We need to specify transition-property, transition-duration, transition-timing-function and finally transition-delay. Web designers can easily provide beautiful effects with the help of transition withoutusing jquery. Hover Browser support: Firefox, Chrome, Opera, IE10+, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[46],"tags":[],"class_list":["post-1323","post","type-post","status-publish","format-standard","hentry","category-css3"],"_links":{"self":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/comments?post=1323"}],"version-history":[{"count":23,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1323\/revisions"}],"predecessor-version":[{"id":1772,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1323\/revisions\/1772"}],"wp:attachment":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/media?parent=1323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/categories?post=1323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/tags?post=1323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}