![\"transitionEx\"](\"\/blog\/wp-ttn-blog\/uploads\/2016\/02\/transitionEx.gif\")
<\/p>\n
Take a box with some initial parameters ,add a background-color(say red) and change the background-color on hover(say green, or any of your favorite!).<\/p>\n
<div class=\u201dbox\u201d> <\/div><\/span><\/p>\n .box\u00a0{ height:500px; width:500px; background-color:red;}<\/span><\/p>\n .box:hover\u00a0{ background-color:green;}<\/span><\/p>\n Well, that gives the regular seen hover effect,\u00a0Now, time to role our wand in air \ud83d\ude42<\/p>\n .box\u00a0{ height:500px; width:500px; background-color:red; transition:all 0.4s;}<\/span><\/p>\n .box:hover\u00a0{ background-color:green;}<\/span><\/p>\n Whoa!! See the beautiful effect!<\/p>\n This magic allows you to see the changing of any property from one perspective to another of a html element.<\/p>\n \u00a0<\/strong>It\u2019s time to be the magician.\u00a0Transition is comprises of its several values : transition-property, transition-duration,transition-timing-function,transition-delay.<\/p>\n \u00a0.box {<\/strong>transition: [transition-property] [transition-duration] [transition-timing-function] \u00a0 \u00a0[transition-delay]<\/strong><\/p>\n 1.Transition property <\/strong>defines, on which property you are defining the effect. It can be one property like color or width or multiple properties or all.<\/p>\n .box \u00a0{transition-property : color;}<\/span><\/p>\n .box \u00a0{transition-property : width,color;}<\/span><\/p>\n .box \u00a0\u00a0{transition-property:all;}<\/span><\/p>\n Transition will be applied to each property of this element<\/p>\n 2.Transition duration <\/strong>calculates the duration of transition (the duration of change).<\/p>\n .box \u00a0{transition-duration : 0.8s;}<\/span><\/p>\n 3.Transition-timing-function <\/strong>specifies how you need to show the transition, it can be first slow then fast or same along the time duration or with some other effects<\/p>\n transition-timing-function : ease <\/strong><\/em>\u00a0 \u00a0Default value. Specifies a transition effect with a slow start, then fast, then end slowly<\/p>\n transition-timing-function : linear;<\/strong><\/em>\u00a0 \u00a0specifies a transition effect with the same speed from start to end<\/p>\n transition-timing-function : ease-in;<\/strong>\u00a0<\/em> \u00a0 specifies a transition effect with slow start<\/p>\n transition-timing-function : ease-out;<\/strong>\u00a0<\/em> \u00a0 specifies a transition effect with slow end<\/p>\n transition-timing-function : ease-in-out;<\/em>\u00a0<\/strong>\u00a0 \u00a0specifies a transition effect with slow start and slow end<\/p>\n transition-timing-function : steps(int,start|end)<\/em>\u00a0<\/strong>\u00a0 The steps() function allows you to specify intervals for the timing function. It takes one or two parameters, separated by a comma: a positive integ\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 and an optional value of either start or end. If no second parameter is included, it will default to end (Ref: https:\/\/csstricks.com\/almanac\/properties\/t\/transition-timing-function\/\u00a0)<\/p>\n transition-timing-function : cubic-bezier(n,n,n,n);<\/em>\u00a0<\/strong>\u00a0 well! If you know the cubic-bezier, play with it!<\/p>\n 4.Transition delay:\u00a0 <\/strong>delays the performance.<\/p>\n .box\u00a0{ transition-delay: 1s;} \u00a0<\/span><\/p>\n Transition action will start after 1 second\u00a0 from the hit action<\/p>\n A transition can be combined with all of its transition property or some of it.<\/p>\n .box { transition : width 0.2s , background 0.8s ease-in\u00a0 1s ;} \u00a0<\/span><\/p>\n Transition applied on width will be with the duration of 0.2 second and on background with duration of 0.8 second, timing function of ease-in and will start with delay of one second.<\/p>\n <\/p>\n <\/p>\n Time to show your tricks to the world!<\/p>\n Before you start, know the compatibility of transition. (Everyone needs it comfort zone.)<\/p>\n Desktop:<\/strong><\/p>\n Chrome : 1.0 \u00a0to upper (less than 26.0 needs \u2013webkit-\u00a0 prefix)<\/p>\n Firefox\u00a0\u00a0 : 4.0 to upper (less than 16.0 needs \u2013moz- prefix )<\/p>\n Internet Explorer : 9.0 to upper<\/p>\n Opera\u00a0\u00a0\u00a0 : 11.6 to upper (needs \u2013o- on 11.6)<\/p>\n Safari\u00a0\u00a0\u00a0\u00a0 : 3.0 to upper (needs \u2013webkit\u2013 prefix )<\/p>\n Mobile:<\/strong><\/p>\n Android : 2.1 (-webkit-\u00a0 prefix)<\/p>\n Firefox\u00a0\u00a0 : 4.0 to upper (less than 16.0 needs \u2013moz- prefix )<\/p>\n Opera\u00a0\u00a0\u00a0 : 10.0 -12.0 (less than 12.0 needs \u2013o- prefix)<\/p>\n Safari\u00a0\u00a0\u00a0\u00a0 : 3.2 to upper (needs \u2013webkit- prefix)<\/p>\n Start playing the magic!<\/p>\n","protected":false},"excerpt":{"rendered":" This is all about the timing of your perception.\u00a0We know how to paint a webpage, let\u2019s add some magic to it and we have the wand called \u201cTransition\u201d. See The Magic Take a box with some initial parameters ,add a background-color(say red) and change the background-color on hover(say green, or any of your favorite!). <div […]<\/p>\n","protected":false},"author":904,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1,"footnotes":""},"categories":[1],"tags":[3152,3151],"class_list":["post-32693","post","type-post","status-publish","format-standard","hentry","category-technology","tag-transition-effect-css","tag-transition-effects"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t![\"trans\"](\"\/blog\/wp-ttn-blog\/uploads\/2016\/02\/trans.png\")
<\/p>\n<\/h3>\n
\n\u00a0<\/strong><\/h3>\n
Know The Magic<\/strong><\/h3>\n
\nShow The Magic <\/strong><\/h3>\n