Link CSS animation

Webdesign/Personal: http://azurelight.net
Deviant Art: http://mikaristar.deviantart.com
Artrift: http://artrift.com/Mikari/
Tumblr: http://mikariazure.tumblr.com



CSS animation, no Java Script or Flash required!



<style type="text/css" media="all">

*, body { font-family:Verdana; font-size:12px; -webkit-text-size-adjust:none;
cursor:url(design/fantasy4.cur),url(design/fantasy3.gif),crosshair; }

*:focus { outline:none; }

textarea { resize: none; }

span.bolet { font-weight:bold; }
span.itlet { font-style:italic; }
span.itabo { font-weight:bold; font-style:italic; }

table,td { border:0px none; border-collapse:collapse; vertical-align:middle;
border-spacing:0px; margin:0px auto 0px auto; padding:0px; text-align:center; }

div.left { padding:0px; margin:0px; border:0px none; text-align:left; background-color:transparent; }

button, input, textarea, select, option, a, span.textlink, #sendform, div#alnp:hover, div#codep:hover, div#sitep:hover {
cursor:url(design/fantasy2.cur),url(design/fantasy1.gif),help; }

div.part { padding:0px; margin:0px; border:0px none; text-align:center; background-color:transparent; }

img.pixgala { margin: 20px 10px 0px 10px; border:0px none; }

td.linky { padding:0px 20px 0px 20px; }

td.section { padding:14px 20px 0px 20px; }

.navilink { background-image:none; border:0px none; padding:0px; margin:0px; cursor:url(design/fantasy2.cur),url(design/fantasy1.gif),help; }

.navilink:hover { cursor:url(design/fantasy2.cur),url(design/fantasy1.gif),help; background-image:none; }

html, body { width:100%; }



ul.mylists { list-style-image:url(site/link_list.gif); margin:0px; line-height:30px; }

span.spanlist:before { content:url(site/link_list.gif); }

body { padding:0px; color:#303030; text-shadow:-1px 1px 0px #ffffff;
background-color:#abffd7; background-image:url(site/link_back2.png);
background-attachment:fixed; background-repeat:repeat-x;
margin:0px; padding:0px; line-height:20px; letter-spacing:1px;
text-align:center; font-family:Verdana; font-size:12px; }

span.navpart { font-weight:bold; color:#555555;
border:0px none; text-shadow:-1px 1px 0px #ffffff;
display:block; padding:7px; text-align:center;
background-image:url(site/link_part.png); background-repeat:repeat-x;
box-shadow: 0px 0px 7px 5px #85f5ff; background-size: auto 100%;
border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; }

a, span.textlink, #sendform { color:#60a7ff; text-shadow:-1px 1px 0px #ffffff;
letter-spacing:1px; font-weight:bold; text-decoration:none; background-image:none;
border:0px none; background-color:transparent; padding:0px 10px 0px 10px; }

a:hover, span.textlink:hover, #sendform:hover {
background-image:url(site/link_link.gif); background-repeat:repeat-x;
text-shadow:1px 1px 0px #ffffff,-1px -1px 0px #ffffff,-1px 1px 0px #ffffff,1px -1px 0px #ffffff; }

.showbor { border:0px none; background-color:#ffff6e;
padding:0px; text-shadow:-1px 1px 0px #ffffff; color:#303030;
box-shadow: 0px 0px 7px 5px #85f5ff; }

input, textarea, select, option { letter-spacing:1px; overflow:hidden;
text-shadow:-1px 1px 0px #ffffff; color:#303030; background-color:#ffff6e;
background-size: auto 100%;  
background-image:url(site/link_part.png); background-repeat:repeat-x;
border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
-webkit-border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px; }

div#pagetop { margin:0px; padding:0px; width:100%; height:500px; text-align:center;
background-color:transparent; border:0px none; background-image:url(site/link_back.png);  
background-repeat:repeat-x; }

div#navi { margin:0px auto 0px auto; padding:10px 0px 0px 0px; overflow:hidden;
width:942px; height:400px; text-align:center; background-repeat:no-repeat;
background-color:transparent; border:0px none; background-image:url(site/link_banner.png);
background-position: center center; background-size: 100% auto; }

div#main { margin:0px auto 0px auto; padding:0px; width:820px; text-align:center;
background-color:transparent; border:0px none; position:relative; top:-70px; }

div#endnavi { margin:0px auto 0px auto; padding:10px 0px 0px 0px;
width:800px; text-align:center; background-color:transparent; position:relative; top:-30px;
border-bottom:0px none; border-left:0px none; border-right:0px none; border-top:3px dotted #01d778; }

div#alnp { border:0px none; margin:0px; padding:0px; background-color:transparent;  
width:597px; height:98px; float:left; position:relative; top:3px; left:197px; background-repeat:no-repeat;
background-image:url(site/link_azure.png); background-position: center center; background-size: 100% auto; }

div#codep { border:0px none; margin:0px; padding:0px; background-color:transparent;  
width:180px; height:72px; float:left; position:relative; top:115px; left:-165px; background-repeat:no-repeat;
background-image:url(site/link_code.png); background-position: center center; background-size: 100% auto; }

div#sitep { border:0px none; margin:0px; padding:0px; background-color:transparent;  
width:146px; height:71px; float:left; position:relative; top:210px; left:-175px; background-repeat:no-repeat;
background-image:url(site/link_site.png); background-position: center center; background-size: 100% auto; }

img#face { float:left; position:relative; top:-45px; left:-580px;
max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }

img#arrow1 { float:left; position:relative; top:-190px; left:270px;
max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }

img#arrow2 { float:left; position:relative; top:-90px; left:260px;
max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }

img#archer { float:left; position:relative; top:-300px; left:380px; }

img#fairy { float:left; position:relative; top:-55px; left:-400px; }

#navi {
animation-name: theback;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }

@keyframes theback {
0% { background-size: 0% auto; }
10% { background-size: 100% auto; }
100% { background-size: 100% auto; } }

div#alnp {
animation-name: word1;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }

@keyframes word1 {
0% { background-size: 0% auto; }
10% { background-size: 0% auto; }
20% { background-size: 100% auto; }
100% { background-size: 100% auto; } }

img#face { animation-name: spin1; }

img#arrow1 { animation-name: spin2; }

img#arrow2 { animation-name: spin3; }

img#face, img#arrow1, img#arrow2 {
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }

@keyframes spin1 {
0% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
20% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
30% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
100% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } }

@keyframes spin2 {
0% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
30% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
40% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
100% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } }

@keyframes spin3 {
0% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
40% { max-width:0%; transform: rotate(400deg); -moz-transform: rotate(400deg); -webkit-transform: rotate(400deg); }
50% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
100% { max-width:100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } }

img#archer { animation-name: jumping;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }

@keyframes jumping {
0% { top:-770px; left:380px; }
50% { top:-770px; left:380px; width:210px; height:400px; }
60% { top:-300px; left:380px; width:210px; height:400px; }
63% { top:-280px; left:370px; width:230px; height:380px; }
66% { top:-300px; left:380px; width:210px; height:400px; }
100% { top:-300px; left:380px; width:210px; height:400px; } }

img#fairy, .navilink2 { animation-name: flying;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }

@keyframes flying {
0% { opacity:0.0; }
50% { opacity:0.0; }
60% { left:-400px; }
63% { left:-420px; }
65% { opacity:1.0; }
66% { left:-400px; }
100% { opacity:1.0; } }

div#codep, div#sitep {
animation-name: word2;
animation-duration: 5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running; }

@keyframes word2 {
0% { background-size: 0% auto; }
67% { background-size: 0% auto; }
77% { background-size: 100% auto; }
100% { background-size: 100% auto; } }

</style> </head> <body>

<div id="pagetop">

<div id="navi">

<a class="navilink" href="http://azurelight.net"><div id="alnp" class="navilink"></div></a>

<a class="navilink" href="http://azurelight.net/code0.php"><div id="codep" class="navilink"></div></a>

<a class="navilink" href="http://azurelight.net/about.php"><div id="sitep" class="navilink"></div></a>

<div style="width:217px; height:209px; float:left;"><img id="face" src="site/link_face.png" alt="AzureLight.net" /></div>

<div style="width:177px; height:175px; float:left;"><img id="arrow1" src="site/link_arrow1.png" alt="AzureLight.net" /></div>

<div style="width:175px; height:171px; float:left;"><img id="arrow2" src="site/link_arrow2.png" alt="AzureLight.net" /></div>

<img id="archer" src="site/link_archer.png" alt="AzureLight.net" style="width:210px; height:400px;" />

<img id="fairy" src="site/link_navi.png" alt="AzureLight.net" />

</div> </div>