CSS3 transition click event [duplicate]

Question

I wand to implement a click event in css3 transition for a div tag. I want it to be like a normal button click event. Still I couldn't find a way to do this. Please can any one help me on this.

Answer 1

As per CSS3 transitions:

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

transition-property: Specifies the name of the CSS property to which the transition is applied.

transition-duration: Defines the length of time that a transition takes. Default 0.

transition-timing-function: Describes how the speed during a transition will be calculated. Default "ease".

transition-delay: Defines when the transition will start. Default 0.

One more property to use all the rest: transition: A shorthand property for setting the four transition properties into a single property.

div
{
    transition: width 1s linear 2s;
}

Or if you want to use plain css pseudo-classes:

Given this html:

<button>Click me!</button>

Use these pseudo-classes:

button { }
button:hover { background-color: lime; }
button:active { background-color: fuchsia; }
button:focus { background-color: yellow; }

:hover is when the mouse is over the element.

:active is when the element is clicked (and hold).

:focus is when you tab to the element.

Hope it helps!