CSS3 Transition Property Basics

Helplogger Home Blog DesignWidgets SEO Menus Po ... CSS3 Transition Property Basics 4 comments You can see on various blogs an interesting effect on some links. Most of the time, when you hover over a link, something changes in its style: it will either change its color or background or will become underlined. What about this cool effect that consists in gradual transition from one style to another, as you can see in this demo below: Hover Over Me! This transition is achieved by using the CSS3 transition property - property which is supported in all major browsers like Chrome, Firefox, Opera, Safari (for Safari we will need the -webkit- prefix to get this effect). The CSS3 Transition SyntaxThe syntax of the transition supports four values: - the property affected by the transition, such as color, border, background, width, etc. - the duration of this transition in seconds, i.e., how long it will take to change your style completely - the delay time for the transition to be executed, also in seconds, i.e., how long it takes for the transition to start when the mouse hovers over that element; Check out the code below: .example { transition-property: width; /* property that undergoes a transition */ transition-duration: 2s; /* duration of the transition */ transition-timing-function: linear;/* timing-function */ transition-delay: 0; /* length of time to delay the start of a transition */ /* now we will repeat the entire declaration with the -webkit- prefix for the effect to work in Chrome and Safari */ -webkit-transition-property: width; -webkit-transition-duration: 2s; -webkit-transition-timing- function: linear; -webkit-transition-delay: 0; } In the example above, the elements with the class .examplewill become wide within two seconds as the mouse passes over them. When we define the style of a link, usually we need to use thea:linkselector, and when defining the style when the mouse is over the link, we need to use the:hoverselector. However, the transition can be used in any HTML element, not just links. To make the transition effect to work properly, we should define two blocks of style for that element, i.e. the normal style for a tag/id/class and the style on mouse:hoverfor a specific tag/id/class. For example: tag, #id, .class { /* insert here the styles that you want for the selector */ /* insert below the transition effects */ } tag:hover, #id:hover, class:hover{ /* Insert here the styles for when the mouse is over the element */ /* here it is not necessary to repeat the declaration of the transition */ }You can add the same style on multiple selectors separated by commas as I have done above, although that's not necessary. Below are some transition examples with their respective codes. I will not use thetransition-timing-functionin these examples because it makes no difference, as the first value is the duration in seconds and the second is the delay. Example 1 Transition example /* with a single property */ #example1 { background-color: #FFFF00; -moz-transition-property: background-color; -moz-transition-duration: 2s; -webkit-transition-property:background-color; -webkit-transition-duration: 2s; -o-transition-property:background-color; -o-transition-duration: 2s; } #example1:hover { background-color: #B5E2FF; } Example 2 Transition example /* with four properties and delay */ #example2 { background-color: #9c3; border: 8px solid #690; padding: 20px; color: #fff; -moz-transition-property:background-color,border; -moz-transition-duration: 1s; -webkit-transition-property: background-color,border; -webkit-transition-duration: 1s; -o-transition-property: background-color,border; -o-transition-duration: 1s; } #example2:hover { background-color: #690; border: 8px dashed #fff; color: #FFFF00; -moz-transition-property:background-color,border; -moz-transition-duration: 2s; -webkit-transition-property:background-color,border; -webkit-transition-duration: 2s; -o-transition-property:background-color,border; -o-transition-duration: 2s; }Example 3 Transition example /* with seven properties and delay */ #example3 { padding: 15px; background-color: #FF7CA6; font-size: 16px; width: 30%; font-weight: bold; color: #fff; height: 20px; -moz-transition-property:background-color,width,height,padding,font-size,color; -moz-transition-duration: 1s; -webkit-transition-property:background-color,width,height,padding,font-size,color; -webkit-transition-duration: 1s; -o-transition-property:background-color,width,height,padding,font-size,color; -o-transition-duration: 1s; } #example3:hover { background-color:#9c3; width: 60%; height: 60px; padding: 50px; font-size: 30px; color: #FFFF00; -moz-transition-property:background-color,width,height,padding,font-size,color; -moz-transition-duration: 2s; -webkit-transition-property:background-color,width,height,padding,font-size,color; -webkit-transition-duration: 2s; -o-transition-property:background-color,width,height,padding,font-size,color; -o-transition-duration: 2s; }Example 4 Transition example /* with all the properties simultaneously */ #example4 { padding: 15px; background-color: #9c3; color: #fff; font-size: 16px; width: 30%; font-weight: bold; transition: all 2s; -webkit-transition: all 2s; } #example4:hover { background-color: #FF7CA6; color: #242424; width: 60%; }Final words: - the transition declarations need to appear in the CSS. In Blogger, the CSS is located before]] - as you can see in the examples above, you can assign different rules for the transitions of different elements in a single rule - just separate them with commas. - it is not mandatory to use the four properties in the transition declaration, but their order must always look like this: property/duration/timing-function/delay. - the duration and delay values ​​must be expressed in seconds, but sometimes a second is a long time for a transition. In this case you can use values with milliseconds, for example, .5s means half a second. - In small time intervals, the timing of the transition-function property does not give a remarkable effect being most useful only in more advanced animations. The possible values are eitherease(the default, which makes the transition with a slow beginning, then gets faster and ends slowly),linear(the same transition speed from beginning to end),ease-in(transition begins slowly and then the speed increases),ease-out(transition starts fast and slows down at the end) andease-in-out. Like 0 Random Posts AdSense optimization tips straight from Google04/03/2012 - 0 Comments Recent Posts Widget with Thumbnails for Blogger/Blogspot04/05/2012 - 135 Comments What is the difference between padding and margins?22/03/2014 - 0 Comments Related Posts: What is the difference between padd... How to Add CSS code To Blogger usin... How to add custom Variable definiti... CSS3 Transition Property Basics How to Increase Thumbnail Resoluti... 4 comments: Anonymous 2/24/2014 I wish to make my blogger blog's blockquote section like #example2 ..what code should I use? Reply Replies Admin 2/24/2014 Replace#example2with.post blockquoteand see if it works. Anonymous 2/25/2014 not working. mortheza wira nanda 2/26/2014 im work for blockquote thank mr Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,775 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments Joseph V M Hi, I've added pagination to my blog... dara king good Mel Ancheta You did it finally, thanks admin (: sorry for my late reply... Sandra Harriette It never ceases to amaze just how much we can do with Blogger.... Gabor Sziladi One question i still have...how can i keep distance between my... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 0 Like