Так что у меня аналогичная ситуация. Я пытаюсь анимировать несколько div на данной странице, и хотя они отображаются в исходном коде, они (и их дочерние элементы) полностью непрозрачны в последней версии Chrome. Я считаю (в моем случае), что я решил проблему. Я использую sass и библиотеку миксинов Bourbon от ребят из thinkbot в приложении для рельсов, но ситуация аналогична. Я не уверен, что это действительно можно считать ошибкой, поскольку решение действительно изложено в некоторых местах в спецификации webkit - на самом деле, в его нынешнем виде кажется, что Chrome - единственные, кто понял это правильно, и поскольку это выглядит так они только начинают поддерживать это (хотя сафари нет?) это упоминается. Несмотря на это, это очевидно при попытке анимировать преобразование с режимом анимации-заполнения обоих. Я убедился, что это работает в более старых версиях Chromium и Safari. Это недавняя проблема, возникшая в нашем приложении после последнего обновления Chrome. Во всяком случае, мой код sass выглядит примерно так
.animation-tilefill {
@include animation(tilefill 0.25s $ease-out-sine);
@include animation-fill-mode(both);
}
@mixin tilefill {
0% {
opacity: 0;
// @include transform(scale(0.0)); // <= There's our issue
// @include transform-origin(left top);
}
80% {
// @include transform(scale(1));
}
100% {
opacity: 1;
}
}
@-webkit-keyframes tilefill { @include tilefill; }
@-moz-keyframes tilefill { @include tilefill; }
@keyframes tilefill { @include tilefill; }
Вам нужно знать немного бурбона и дерзости, чтобы знать, что это делает, но для нужд этого ответа достаточно сказать, что он анимирует масштабное преобразование, а также непрозрачность элемента. Проблема с этим кодом на самом деле не связана с самим преобразованием, а связана 0.0 VALUE — нулевое значение является ключом. Если вы посмотрите здесь: Справочник Safari по CSS вы увидите в описании оба режима анимации-заполнения, что:
«Начальный ключевой кадр анимации применяется, как только стиль анимации применяется к элементу, а последний ключевой кадр анимации продолжает применяться после завершения последней итерации анимации. Начальный ключевой кадр влияет только на анимации, которые имеют ненулевое значение для -webkit. -анимация-задержка."
Ключевой частью является то, что Исходный ключевой кадр влияет только на анимацию, которая имеет ненулевое значение для -webkit-animation-delay. Мое исправление состояло в том, чтобы изменить значения в transform(scale()) на что-то неотрицательное, например в виде:
0% {
opacity: 0;
@include transform(scale(0.01)); // <= There's our issue
@include transform-origin(left top);
}
Как только это было изменено, проблема решена - надеюсь, это поможет. Я хотел бы знать, что некоторые люди думают о поддержке этого, хотя :)
20.08.2012
