{"id":32693,"date":"2016-02-15T22:28:03","date_gmt":"2016-02-15T16:58:03","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=32693"},"modified":"2016-03-03T18:40:44","modified_gmt":"2016-03-03T13:10:44","slug":"transition-know-the-effect","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/transition-know-the-effect\/","title":{"rendered":"Transition – Know the Effect!"},"content":{"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.<\/p>\n

See The Magic<\/strong><\/h3>\n

\"transitionEx\"<\/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

\"trans\"<\/p>\n

<\/h3>\n
\n

\u00a0<\/strong><\/h3>\n

Know The Magic<\/strong><\/h3>\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

\n

 <\/p>\n

Show The Magic <\/strong><\/h3>\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},"categories":[1],"tags":[3152,3151],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/32693"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/904"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=32693"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/32693\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=32693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=32693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=32693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}