Transition selector in CSS3

How to change the values of CSS property by interaction like hover, click focus etc.. in CSS3?

By using Transition in CSS we can change the values of css property by interaction like hover, click focus etc...

<style>
        /* width, opacity, position, font-size */
        a.class1 {
            padding: 5px 10px;
            background-color: #9c3;
            font-size: smaller;
            width: 200px;
            -webkit-transition: all 0.7s ease;
            -moz-transition: all 0.7s ease;
            -o-transition: all 0.7s ease;
            transition: all 2.0s ease;
            /* transition: background 0.7s ease; */
        }

            a.class1:hover {
                background-color: #690;
                font-size: larger;
                width: 400px;
            }
</style>

<body>
    <p>This is some text.</p>
    <a href="http://www.dotnetfunda.com" class="class1">DotNetFunda.com</a>
    <p>This is some text.</p>
</body>

In above code snippet, the background color and the font-size of the link change on mouse over. We
can apply transition on width, opacity, position, font-size etc.

In case we want to transition only one property value, replace “all” with the property name like