How To Create CSS3 Transitions Without JavaScript

I’m always on the look out for new ways to use CSS3. The latest treasure trove of CSS3 code that I found comes from a site called Impressive Webs.

This article will focus on using CSS3 transitions without using :hover or JavaScript. I really like this set of code because it has multiple, functional uses that many sites could use without being over-the-top or unnecessary.

:active Transitions

To get started, here’s some sample code for making transitions using :active.

box {  
    width: 300px;  
    height: 300px;  
    background: #222;  
    -webkit-transition: width 2s ease, height 2s ease;  
    -moz-transition: width 2s ease, height 2s ease;  
    -o-transition: width 2s ease, height 2s ease;  
    -ms-transition: width 2s ease, height 2s ease;  
    transition: width 2s ease, height 2s ease;  
}  
  
.box:active {  
    width: 500px;  
    height: 500px;  
} 

View the :active demo to see how the box becomes larger as you hold down the mouse button and returns to the original size when you release the mouse button. Applying this CSS3 code to an image might serve as a practical purpose. It might be a pleasant experience for your visitors to have the ability to enlarge an image for better viewing.

:focus Transitions

The following sample code shows how to create a transition using :focus.

input, textarea {  
    width: 280px;  
    -webkit-transition: width 1s ease;  
    -moz-transition: width 1s ease;  
    -o-transition: width 1s ease;  
    -ms-transition: width 1s ease;  
    transition: width 1s ease;  
}  
  
input:focus, textarea:focus {  
    width: 340px;  
} 

This CSS3 code provides a different take on highlighting a field when a visitor clicks on it. Instead of a glow or highlight effect, the text box slightly enlarges. View the demo.

:checked Transitions

This sample CSS3 code provides a means to animate check boxes and radio buttons when a visitor clicks on them.

input {
    height: 20px;
    -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 1s ease;
    transition: width 1s ease;
}

input:checked {
    width: 30px;
}

As you can see in the demo, the check box shifts to the right when you click on the box.

:disabled Transitions

This set of code appears especially useful in that you can activate or deactivate a text box depending on which radio button is selected. The demo displays this nicely.

input[type="text"], textarea {
    background: #e2e2e2;
    -webkit-transition: background 1s ease;
    -moz-transition: background 1s ease;
    -o-transition: background 1s ease;
    -ms-transition: background 1s ease;
    transition: background 1s ease;
}

input:disabled, textarea:disabled {
    background: #666666;
}

The difference with this CSS3 code from the previous code examples is that it does require some jQuery to work. The jQuery code either activates or deactivates the :disabled attribute.

$(function() {
    $('input[type="radio"]').click(function() {
   	 if ($(':checked').val() === "other") {
   		 $('input[type="text"]').removeAttr("disabled");
   	 } else {
   		 $('input[type="text"]').attr("disabled", "disabled");
   	 }
    });
});

Media Queries and Modernizer

Media queries and Modernizer have been covered in previous HTMLgoodies articles, but here’s some more sample code for you to test CSS3 transitions. This code tells an object to shrink if the browser window falls below 961px. For the demo, resize your browser window to watch the box grow and shrink.

Here’s the code:

.box {
    width: 440px;
    height: 440px;
    background: #222;
    margin: 0 auto;
    -webkit-transition: width 2s ease, height 2s ease;
    -moz-transition: width 2s ease, height 2s ease;
    -o-transition: width 2s ease, height 2s ease;
    -ms-transition: width 2s ease, height 2s ease;
    transition: width 2s ease, height 2s ease;
}

@media only screen and (max-width : 960px) {
    .box {
   	 width: 300px;
   	 height: 300px;
    }
}

Hopefully you find some good, useful purposes for these CSS3 transitions code examples.