Link/Animation (CSS3) funktioniert im IE nicht

[the_Stibä]

Im Internet Explorer wird die Animation (mit Css3) nicht ausgeführt, und der Link funktioniert nicht.

<header id="photoshop">
    <a href="indesign.html">
        <section class="next" id="gotoId">
            <img src="img/indesign.jpg" alt="InDesign"><h2>InDesign</h2>
        </section>
    </a>
    <a href="illustrator.html">
        <section class="back" id="gotoAi">
            <img src="img/illustrator.jpg" alt="Illustrator"><h2>Illustrator</h2>
        </section>
    </a>
</header>

CSS:
.next{
position: absolute;
right: -150px;
top: 45%;
width: 200px;
height: 50px;

transition: 0.75s;
-webkit-transition: 0.75s;
}

.next:hover{
right: 0;
}

.back{
position: absolute;
top: 45%;
left: -150px;
width: 200px;
height: 50px;

transition: 0.75s;
-webkit-transition: 0.75s;
}

.back:hover{
left: 0;
}

 

[threadi]

Schau hier mal nach was Du für eine transition alles angeben musst:
http://www.mediaevent.de/css/transition.html

Das die Links nicht gehen könnte daran liegen, dass Du die Inhalte des Links absolut positionierst und somit den Link ggfs. leerst. Verzichte wenn es geht auf absolute Positionierung, das macht es oft einfacher.

Moderation: Verschoben von HTML zu CSS.

 

[Tronjer]

Außerdem ist der obige Code syntaktisch falsch und semantisch fragwürdig. Ein Blockelement wie <section> gehört nicht in einen Hyperlink, und wenn lediglich Bilder mit Unterschriften abgebildet werden sollen, würden sich Background-Images und eine unsortierte Liste anbieten.

http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf