Rahmenbedingungen
HTML-Version: 4.01 Transitional
Browser & Betriebssystem: Chrome, Safari, Firefox, Opera, IE
Editor: CoffeeCup HTML Editor
Problembeschreibung
Mein Ziel: 2 Puzzleteile fallen nacheinander und nebeneinander vom oberen Bildrand ein. (Flash fällt daher als Option weg.)
Link zur Seite: http://www.sabrinack.ch/animation-puzzleNeu.html
Fehlermeldung/-beschreibung: Puzzleteile nicht nebeneinander.
bisherige Lösungsversuche: Gegoogelt, gegoogelt, gegoogelt. OK gebe zu, der Code ist gebastelt, mache sowas zum 1. Mal und habe mir diesen aus verschiedenen Tutorials zusammengebastelt.
Code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<STYLE TYPE="text/css">
@-moz-keyframes puzzle1-moz {
0% {
padding-left: 40%;
padding-top: 0px
}
50% {
padding-left: 40%;
padding-top: 40%;
}
100% {
padding-left: 40%;
padding-top: 8%;
}
}
@-ie-keyframes puzzle1-ie {
0% {
padding-left: 40%;
padding-top: 0px
}
50% {
padding-left: 40%;
padding-top: 20%;
}
100% {
padding-left: 40%;
padding-top: 8%;
}
}
/* Animation Puzzle2 */
@-moz-keyframes puzzle2-moz {
0% {
padding-left: 42%;
padding-top: 0px
}
50% {
padding-left: 42%;
padding-top: 35%;
}
100% {
padding-left: 42%;
padding-top: 19%;
}
}
@-webkit-keyframes puzzle2-webkit {
0% {
padding-left: 42%;
padding-top: 0px
}
50% {
padding-left: 42%;
padding-top: 35%;
}
100% {
padding-left: 42%;
padding-top: 19%;
}
}
@-o-keyframes puzzle2-o {
0% {
padding-left: 42%;
padding-top: 0px
}
50% {
padding-left: 42%;
padding-top: 35%;
}
100% {
padding-left: 42%;
padding-top: 19%;
}
}
@-ie-keyframes puzzle2-ie {
0% {
padding-left: 42%;
padding-top: 0px
}
50% {
padding-left: 42%;
padding-top: 35%;
}
100% {
padding-left: 42%;
padding-top: 19%;
}
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.left {
float: left;
width: 35%;
margin-left: 60%;
border: 1px;
}
.puzzleteil1 {
margin-top: 0px;
padding: 0px;
float: left;
-moz-animation-name: puzzle1-moz;
-moz-animation-duration: 1s;
-moz-animation-delay: 3ms;
-moz-animation-timing-function: ease-out;
-moz-animation-fill-mode: forwards;
}
.puzzleteil1 {
margin: 0px;
padding: 0px;
float: left;
-webkit-animation-name: puzzle1-webkit;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 3ms;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
}
.puzzleteil1 {
margin: 0px;
padding: 0px;
float: left;
-o-animation-name: puzzle1-o;
-o-animation-duration: 1s;
-o-animation-delay: 3ms;
-o-animation-timing-function: ease-out;
-o-animation-fill-mode: forwards;
}
.puzzleteil1 {
margin: 0px;
padding: 0px;
float: left;
-ie-animation-name: puzzle1-ie;
-ie-animation-duration: 1s;
-ie-animation-delay: 3ms;
-ie-animation-timing-function: ease-out;
-ie-animation-fill-mode: forwards;
}
/* Animation Puzzle 2 */
.puzzleteil2 {
margin: 0px;
padding: 0px;
float: left;
-moz-animation-name: puzzle2-moz;
-moz-animation-duration: 1s;
-moz-animation-delay: 10ms;
-moz-animation-timing-function: ease-out;
-moz-animation-fill-mode: forwards;
}
.puzzleteil2 {
margin: 0px;
padding: 0px;
float: left;
-webkit-animation-name: puzzle2-webkit;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 10ms;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
}
.puzzleteil2 {
margin: 0px;
padding: 0px;
float: left;
-o-animation-name: puzzle2-o;
-o-animation-duration: 1s;
-o-animation-delay: 10ms;
-o-animation-timing-function: ease-out;
-o-animation-fill-mode: forwards;
}
.puzzleteil2 {
margin: 0px;
padding: 0px;
float: left;
-ie-animation-name: puzzle2-ie;
-ie-animation-duration: 1s;
-ie-animation-delay: 10ms;
-ie-animation-timing-function: ease-out;
-ie-animation-fill-mode: forwards;
}
.div {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
</STYLE>
<TITLE></TITLE>
</HEAD>
<BODY>
<DIV CLASS="clearfix left">
<DIV CLASS="puzzleteil1">
<IMG SRC="puzzleteil1-web.png" WIDTH="150" HEIGHT="151" ALT="Puzzleteil, welches von Oben herabfällt." TITLE="Puzzleteil inLocation" BORDER="1">
</DIV>
<DIV CLASS="puzzleteil2">
<IMG SRC="puzzleteil2-web.png" WIDTH="150" HEIGHT="151" ALT="Puzzleteil, welches von Oben herabfällt." TITLE="Puzzleteil a&o" BORDER="1">
</DIV>
</DIV>
</BODY>
</HTML>