CSS3 introduced many new properties to the world of web design and development. If you have never heard of properties such as transition, transform, or animation, then you are in the right place!

CSS3 transitions are supported in the current version of all major browsers. As you might expect, versions of Internet Explorer previous to IE10 do not support these properties. Don't fret. The older versions of IE will skip the transition without causing any issues.

In this post, I will randomly walk through a number of CSS3 properties that can spice up your site. One of today's most popular uses of transitions is the hover effect. Lets take a quick look at an example where the text will slowly change color when we hover over it.

 

Hover over this text!

 

This transition was accomplished by using the following:

.transition-example1 {
  font-color: #000;
  font-size: 16pt;
  font-weight: bold;
  transition: color 1s ease-in;
  -webkit-transition: color 1s ease-in;
  -moz-transition: color 1s ease-in;
  -o-transition: color 1s ease-in;
}
.transition-example1:hover {
  color: #0f0;
}

Well that was easy! We set the first parameter of the transition property to "color" since we just wanted to target the color property in the hover selector. We could use "all" if we wanted the transition to apply to all properties contained in the hover CSS. The second parameter sets the speed of the transition. In this case it was 1 second. The final parameter is how you want the timing of the transition to act. There are quite a few options. See the example below for each effect!

linear

ease

ease-in

ease-out

ease-in-out

Here are a few more transition examples:

  • Menu Item 1
  • Menu Item 2
  • Menu Item 3
  • Menu Item 4

This effect is done by using the transition effect on both color and padding within the hover selector. Below is the code to implement this transition.

  ul.transition-list li {
    color: #000;
    cursor: pointer;
    font-size: 14pt;
    font-weight: bold;
    transition: all .5s ease-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
  }
 
  ul.transition-list li:hover {
    color: #aaa;
    padding-left: 20px;
  }
<ul class="transition-list">
  <li>Menu Item 1</li>
  <li>Menu Item 2</li>
  <li>Menu Item 3</li>
  <li>Menu Item 4</li>
</ul>

 


 

I believe that the most powerful use of the transition property is in conjunction with the transform property. I will explain transforms in the next article, but here is an example of using both at once.

A Nice little overlay with a bit of text in it to fill up the large area that this example will cover.

The entirety code for this effect is shown below:

figure {
  margin: 0;
}
 
.thumbnail figcaption {
  background: rgba(20, 100, 140, 0.9);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  color: #fff;
  font-size: 10pt;
  margin: 10px;
  padding: 10px;
  width: 230px;
}
 
div.thumbnail-1 {
  background: #fff;
  border: 5px solid #ddd;
  cursor: pointer;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2);
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2);
  -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2);
  -o-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2);
  -ms-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2);
  display: inline-block;
  height: 190px;
  margin: 20px;
  overflow: hidden;
  position: relative;
  width: 270px;
}
 
.thumbnail-1 figcaption {
  height: 150px;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
}
 
.thumbnail-1 figcaption {
  transition: all 350ms ease-out;
  -webkit-transition: all 350ms ease-out;
  -moz-transition: all 350ms ease-out;
  -o-transform: all 350ms ease-out;
}
 
.thumbnail-1:hover figcaption {
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
}
<div class="thumbnail thumbnail-1">
  <figure>
    <center><img src="/sites/default/files/monarch_mountain.jpg" /></center>
    <figcaption>
      <center><p>A Nice little overlay with a bit of text in it to fill up the large area that this example will cover.</p></center>
    </figcaption>
  </figure>
</div>

 


 

Using SASS/Compass to compile your CSS is becoming a requirement for productivity these days (sass-lang.com, compass-style.org). You can save many lines of code by using predefined mixins. For example:

    transition: all .5s ease-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;

Becomes:

    @include transition(all .5s ease-out);

I encourage you to experiment with this property. There are countless effects you can develop that don't require a single line of coding. I believe that you should only use transitions for subtle changes. Like using the box-shadow property, it simply looks better when you barely know its there. Here are a few resources to help you learn more about transitions.

Tags