Unten die CSS für meine Animation vom Link im Block oben. Ich habe diese CSS hier, damit man es einfacher im Quelltext erkennen kann, in die > "Page Settings" > "Inside <head> code" kopiert. Die hier verwendete class="underlined-example" habe ich als <span> Tag um den verlinkten Text gesetzt:
<a href="Link-Animation.html#content1-dd"><span class="underlined-example">Gehe mit Maus über diesen Link-Text zur CSS</span></a>
Diese CSS habe ich, etwas abgewandelt, auf tobiasahlin.com gefunden.
<style>
.underlined-example {
position: relative;
text-decoration: none;
font-size: 15px;
display:inline-block;
}
.underlined-example:hover {
color: #000;
}
.underlined-example:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: red;
visibility: hidden;
-webkit-transition: all 0.6s ease-in-out 0s;
-moz-transition: all 0.6s ease-in-out 0s;
-o-transition: all 0.6s ease-in-out 0s;
transition: all 0.6s ease-in-out 0s;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
.underlined-example:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
</style>