CSS3 Text and Motion Experiment June 25th, 2014

Animating with CSS can be as simple as using transform and/or transition on elements and setting the final animation state via a pseudo-class like :hover…

...
#text {
    ...
    top:200px;
    ...
    opacity: 0;
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
}
#photo {
    opacity: 0.25;
    -webkit-transform: scale(1.5) translate3D(0, 0, 0);
    -webkit-transition: all 5s linear;
    -moz-transform: scale(1.5);
    -moz-transition: all 5s linear;
}
#container:hover #photo {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
}
#container:hover #text {
    top:150px;
    opacity: 1;
}