Road Runner - CSS3 Transform and Transition

This demo is using one animated GIF image. Converted to base64 image.
DEMO
Hover on the title text below to see the animation
Road Runner
CSS and HTML elements
I put some comments in the CSS section so you could have some idea of what's going on in there.
<style>

/*This is the title text*/
.texxx {
  font-size:60px;
  font-family:calibri;
  cursor:pointer;
  transition:all 0.2s;
  display:inline-block;
}

/*The skewing title text fx*/
.texxx:hover {
  transform:skew(-20deg,0);
  -webkit-transform:skew(-20deg,0);
  -moz-transform:skew(-20deg,0);
  -o-transform:skew(-20deg,0);
  margin-left:10px;
}

/*This is the canvas below the title*/
.canvas {
  background:white;
  box-shadow:0 20px 100px #777 inset;
  width:600px;
  display:block;
  height:150px;
  border-radius:20px;
  border:2px solid #ddd;
  /*Transition properties, timing, and delay for canvas*/
  transition: 
    background 2s 1s,
    box-shadow 2s 1s,
    border-color 2s 1s;
}

/*The GIF*/
.road-runner {  
  width: 123px;
  height: 57px;
  background-repeat: no-repeat;
  /*This is the base64 URI image (static GIF)*/
  background-image: url(data:image/gif;base64,R0lGODlhewA5AMQeAEpanDlSa2OMrXulxpTe/0prhJScpa2EEHuEtWtre5ScznOEnDlKY2t7tZylzoxaKZzn//+1AAAAAO/v796tSs6EAJxjEK1rCGtKGP+1EIzO7wgQORAhWv///////wAAACH5BAEAAB4ALAAAAAB7ADkAAAX/oCeOZGmeaKqubOu+cCzPdG3feK7vfM9zm+CGw/GNiMikcZlCbiTCYBEH5AQChYJAMBg0BNnC1Ylk5oDRNFFaK2IHGoh8Tq8TNAOwOMDwJIdmLWhDSYWEgDMcXRqMeF1fentbXXAElneNjg0FDEqBJVJOamuHiDGkUWUkipmtroyWjHkBqmahUVCDQrpCDAmdPURaAg2Ur8exGgJEZoNTvE9CElChCB0dE8A/fwxcx9+WA8yfKKkkQxsPBxPXfUfBEmGL36532uQmU6APEf0RFB4YbPDDwIIOIgy0wGl1KRkyDbTwucDgr1+FixUuXIhgkEqBOHIaOtJzhcvCVwQK/+iTiILDxooVKvZb2WaLzSx80DzbUIDSSYbLWLbkQCFDhIsWMGDQmJSmDWdOjyzwaayeuKj4rBAYINCUH6GrNiTMsmDBpHoaCgwUSgSOSqxg/XAwSc/quE8cGHTpBDdu3pANAwvGdCfAWiZ5wdyNq4LDMJuQI0MuBgfCsr5tEi5YzHgFtFFOJHhQCHIz5hfCFJ/u/LRQwi60Vg8dvYkza7xPFkDgKnuVFbe9bwcL8nGr4SaiAlRSKVw4kStqc30WoiGW7eaMpaQhZIhBdQ3BsePWKUr7BgGWwovHOz0KegIR18sXEY0B37wDLDGfz5+gt+p37NdffwA0YMCBDiggwP+ABAqAACRllYUAAAyKV+AACijQBQIHGkABBQY0UOFtAADwoAAlAnCFiQdScIABFI4IVokNfFFiCSUuYMABLy4oo0QAOIiAAg+qaEKJCahzQAIB/GgGjUM6ICWRRpoQAABJvrhAk076AKUDIiQ4YYwoBPCAOgkw2SUPAaRpgJRilsilCgycmWYBa+LAxwMW8NhhAze6YOYDCSyAZ540FJAljzymmYCRV1yxwqCFkonoC1cukMABHx5YVqAepCjnCVg4mgACC1wqaIoNcHggAkVWKQKNKFrqwZUAaJrmp6qyAGWGwCKA4pw4NmCWrCUK2eECsvbnCaYFDgmsF6CWmSLvnm0OCWuHBkx4qLMOTOCAARNstmqrGcIKKLEqYNFmoW/C2S2s1c7HwTX4XuNAEVbw61SBGTpQJLuTZolgmN0y26y9C+SbrwMMNJxNWTSZqMCUtRJsQp1KvvjmCAYwqzF/BjhsssMeGBBftBcLLKqc7NbJKKPcJmxrhfeerPM1Exx6pYNTCruFscamyefMjO5a1qMLj5jzzjpPMNqtAAcLa8vjuoj0zI5+m+fTUOcrwgQKMEMjsGiDmfKOSJ9J6Mhd5mVAygwEYEACeXGQgLhMxhYfBxTiOrSxrhrgttt190pOpFjgBLfikEcu+eQyhgAAOw==);
  margin:80px 0px 10px 20px;
  transform:skew(30deg,0);
  -webkit-transform:skew(30deg,0);
  -moz-transform:skew(30deg,0);
  -o-transform:skew(30deg,0);

  /*Transition properties, timing and delay*/
  /*I put the -webkit, -moz & -o prefixes because of the transform property*/
  transition:     
    margin 2s 0.5s,
    transform 2s 1s;
  -webkit-transition: 
    margin 2s .5s,
    -webkit-transform 2s 1s;
  -moz-transition:
    margin 2s .5s, 
    -moz-transform 2s 1s;
  -o-transition:
    margin 2s .5s,
    -o-transform 2s 1s;
}

/*The text hover trigger - result on road-runner element*/
.texxx:hover + .canvas > .road-runner {
  /*This is the base64 URI image (animated GIF)*/
  background-image: url(data:image/gif;base64,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);
  transform:skew(-45deg,0);
  -webkit-transform:skew(-45deg,0);
  -moz-transform:skew(-45deg,0);
  -o-transform:skew(-45deg,0);
  margin-left: 510px;
}

/*The text hover trigger - result on canvas*/
.texxx:hover + .canvas {
  background:#008dd3;
  box-shadow:0 20px 100px #000 inset;
  border-color:#000;
}
</style>

<!--These are the HTML elements-->
<div class='texxx'>Road Runner</div>
<div class='canvas'>
  <div class='road-runner'></div>
</div>
Monkey Raptor

Monkey Raptor

Monday, July 29, 2013

Road Runner - CSS3 Transform and Transition

No comments

Post a Comment
