Design Template by Anonymous

Transition Syntax

Shorthand

Below is the syntax of the transition shorthand. There are four properties, listed in the brackets. Transition is also called on an element, which is represented here with the example class .element that references an element in the HTML.

          
            .element {
                transition: [property] [duration] [timing–function] [delay];
            }
          
        

transition-property

This property indicates what property will actually be affected by the transition. These can be properties such as width, background-color, color (of text), etc. So, if you were to use transition–property: font–size;, and then specify a duration before the semi–colon, as well as a start and end size elsewhere in the code (this will make sense after reading the next paragraph), we can make the font size shrink or grow depending on what it is set to.

One VERY important thing to note is that in order for our transition to work, we need to specify a beginning state, and an end state. Our beginning state should appear within the declaration list under the element we want to transition. In the above example, we would put our beginning state under the .element class. Our end state should appear in a separate section, with pseudo classes. This will determine whether you want the transition to occur when hovered over, when clicked on, both, or something separate. Below is a better visual about how this would be done.

          
            .element {
                background–color: #FF0000;
                transition–property: background–color;
            }

            .element:hover {
                background–color: #00FF00;
            }
          
        

Just using transition–property: background–color; within our CSS will not do anything on its own—we need to specify the duration in order for that line to mean anything. However, because of the way our browser works, the code shown above will work. The browser assumes that we are trying to create a transition, because we have the start and end colors set. The transition won’t be smooth, but we will see the initial color switch without setting the duration.

transition-duration

This property determines how long the actual transition effect will take place on the element. There are three different property values we can use for this property, and they include inherit, initial, and a specified time, either in seconds or miliseconds, like this: 2s. It can be written like this:

          
            .element {
                transition–duration: 2s;
            }
          
        

When written in conjunction with transition–property, you will see that the transition becomes an actual transition!

transition-timing-function

This property specifies how the speed curve of the animation will be. If you have a button that grows in width when hovered over, the timing-function property can help determine how fast or slow that animation will start and end. There are a bunch of different property values that can be associated with timing-function, but only a few are listed below for simplicity. I recommend taking a peek at some interactive websites to see how these property values work in real time.

• transition–timing–function: ease; : Starts slow, gets fast, ends slow
• transition–timing–function: ease–in; : Starts slow, ends fast
• transition–timing–function: ease–out; : Starts fast, ends slow
• transition–timing–function: linear; : Same speed throughout
• transition–timing–function: cubic–bezier(.17, .67, .83, .67); : Allows you to set custom curve

transition-delay

This property sets a delay time between when the transition effect is started and when it ends. If you have delay set to 2 seconds, and your transition is triggered with hover, this means that when you hover over the element, 2 seconds will go by before anything happens with the transition. transition-delay is like transition-duration in that you can give it one of three values: inherit, initial, and time, either in seconds or miliseconds (like 150ms).

It’s important to know how best to use the delay property so that users don’t really notice it. If they hover over your navigation bar, and nothing happens for 2 seconds, users will likely be confused when the button eventually changes colors because it wasn't immediately shown to them that a change would occur. Make sure to test your site and have others test your site so that you can better gauge if your transitions are reasonable or not.

          
            .element {
                transition–delay: 2s;
            }
          
        

Shorthand, Put Together

When all of the properties are put together, we might end up with something like this:

          
            .element {
                width: 100px;
                transition: width 2s ease 0.5s;
            }

            .element:hover {
                width: 150px;
            }