Transform example

by borayeris

HTML

<div class="wrap">
  <h6>header</h6>
  <p>test 123</p>
</div>

CSS

.wrap{
    width: 200px;
    height: 200px;
    background: yellow;
}
h6,p{margin: 0;}
.wrap h6{
    transform: translate(0,20px);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.wrap:hover h6{
    transform: translate(0,0px);
}
.wrap p{
    transform: translate(0,20px);
    -webkit-transition: all 1s ease .1s;
    -moz-transition: all 1s ease .1s;
    -ms-transition: all 1s ease .1s;
    -o-transition: all 1s ease .1s;
    transition: all 1s ease .1s;
}
.wrap:hover p{
    transform: translate(0,0px);
}