Transition example

by gnepud

HTML

<div id="cont">
        <div id="test">
            <a href="#test">cliquez moi</a>
        </div>
    </div>
    <a href="#">Recommencer</a>

CSS

#cont {
    position: relative;
    height: 100px;
}

#test,#test:visited {
    position: absolute;
    width: 130px;
    padding: 10px;
    background-color: #B8DA40;
    text-align: center;
    text-transform: uppercase;
    left: 0;

    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;

    -webkit-transition-timing-function: cubic-bezier(.43,-0.83,.53,1.73);
    -moz-transition-timing-function: cubic-bezier(.43,-0.83,.53,1.73);
    -o-transition-timing-function: cubic-bezier(.43,-0.83,.53,1.73);
    -ms-transition-timing-function: cubic-bezier(.43,-0.83,.53,1.73);
    transition-timing-function: cubic-bezier(.43,-0.83,.53,1.73);
}

#test a,#test a:visited {
    color: #5A5A5A;
    text-decoration: none;
}

#test:target {
    left: 50%;
}