CSS Animation -> Funktioniert in chrome, aber nicht in Firefox
slash
- css
Hallo,
ich habe hier eine einfache css3-animation die den Hintergrundfarbenwechsel eines linkes animiert. Das funktioniert auch wunderbar, nur leider im Firefox nicht.
Hat jemand eine Idee warum, das ganze nicht funktionert?
<html>
<head>
<style type="text/css">
.flRowEven{
width:100px;
}
@-webkit-keyframes fade {
from {
background:red;
-webkit-transform: background-color;
-moz-transform: background-color;
}
to {
background:blue;
-webkit-transform: background-color;
-moz-transform: background-color;
}
}
.flRowEven {
-webkit-animation-name: fade;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-moz-animation-name: fade;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
-moz-animation-duration: 1s;
}
</style>
</head>
<body>
<div>
<a href="#" onclick="document.getElementsByTagName('div')[0].className='flRowEven'">link</a>
</div>
</body>
</html>
Hi,
@-webkit-keyframes fade {
from {
background:red;
-webkit-transform: background-color;
-moz-transform: background-color;
wenn der ganze fade-Block -webkit- spezifisch ist, wie hoch ist die Wahrscheinlichkeit, daß ein Firefox das -moz-transform darin sieht?
cu,
Andreas
Hi,
@-webkit-keyframes fade {
from {
background:red;
-webkit-transform: background-color;
-moz-transform: background-color;wenn der ganze fade-Block -webkit- spezifisch ist, wie hoch ist die Wahrscheinlichkeit, daß ein Firefox das -moz-transform darin sieht?
cu,
Andreas
Ups... ja stimmt, aber auch wenn das korrigiert habe, funktioniert das nicht :/
<html>
<head>
<style type="text/css">
.flRowEven{
width:100px;
}
@-webkit-keyframes fade {
from {
background:red;
-webkit-transform: background-color;
}
to {
background:blue;
-webkit-transform: background-color;
}
}
@keyframes fade2 {
from {
background:red;
-moz-transform: background-color;
}
to {
background:blue;
-moz-transform: background-color;
}
}
.flRowEven {
-webkit-animation-name: fade;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-moz-animation-name: fade2;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
-moz-animation-duration: 1s;
}
</style>
</head>
<body>
<div>
<a href="#" onclick="document.getElementsByTagName('div')[0].className='flRowEven'">link</a>
</div>
</body>
</html>
Hi,
Ups... ja stimmt, aber auch wenn das korrigiert habe, funktioniert das nicht :/
Hast Du denn einen 5er Firefox?
cu,
Andreas
Ja hab ich
Hi,
Ups... ja stimmt, aber auch wenn das korrigiert habe, funktioniert das nicht :/
Hast Du denn einen 5er Firefox?
cu,
Andreas
Om nah hoo pez nyeetz, slash!
Hast Du denn einen 5er Firefox?
Ja hab ich
Die Computerbild schreibt, dass die geplanten Funktionen in die Beta noch nicht eingebaut wurden. Allerdings ist das schon 'ne Weile her. Schau doch mal nach der aktuellen Version (b3).
Matthias
Om nah hoo pez nyeetz, slash!
in der 5.0b3 werden diese Beispiele richtig dargestellt.
Matthias