Каковы действительные свойства CSS Ваапи - PullRequest
Новая
       69

Каковы действительные свойства CSS Ваапи

0 голосов
/ 08 ноября 2019

Есть ли разница в общих свойствах анимируемых CSS, перечисленных здесь здесь ?

Некоторые свойства CSS можно анимировать с помощью CSS-анимации или CSS-переходы . Анимация означает, что их значения могут постепенно изменяться в течение заданного промежутка времени.

Является ли waapi подмножеством Css Анимация ?

Иэти свойства перечислены в дом где-нибудь? Или мне придется скопировать их, чтобы проверить, является ли строка таким свойством?

1 Ответ

2 голосов
/ 11 ноября 2019

Чтобы ответить на ваш вопрос просто, нет разницы в наборе анимируемых свойств CSS. Технически говоря, CSS-анимация является подмножеством веб-анимаций.

В DOM нет списка анимируемых свойств. Чтобы определить, является ли свойство анимируемым, вы можете создать анимацию или установить ключевые кадры для существующей анимации (используя setKeyframes()), а затем прочитать ключевые кадры обратно, используя getKeyframes(), чтобы увидеть, появляется ли оно там.

Это краткое изложение, но вот еще несколько моментов, которые могут оказаться интересными в зависимости от того, что вы пытаетесь сделать:

  • Набор свойств, которые можно анимировать с помощью переходов CSS, являетсяподмножество тех, которые могут быть анимированы с помощью CSS-анимации и веб-анимации. Это так называемые переходные свойства .

  • Набор свойств, которые можно анимировать с помощью веб-анимации, технически является подмножеством свойств, которые можно анимировать с помощью CSS-анимации, но на практике онито же самое (хотя см. следующий пункт). Например, возможно, что в будущем Web Animations сможет анимировать свойство display, но CSS Animations никогда не сможет это сделать.

  • Web-анимация технически допускает префикссвойства должны быть анимированными, но Safari и Chrome не поддерживают это, и Firefox и спецификация, вероятно, будут изменены, чтобы соответствовать. (Подробнее см. в этой спецификации .)

  • Зарегистрированные пользовательские свойства также можно анимировать с помощью веб-анимации, хотя это не везде реализовано.

  • У пары свойств есть специальные имена при использовании в ключевых кадрах Web Animation для избежания конфликтов, в частности cssFloat (для 'float') и cssOffset (для 'offset').

Итак, чтобы создать полный список анимируемых свойств, вам, вероятно, потребуется посмотреть на свойства, отображаемые в чем-то похожем на результат getComputedStyle(), добавить любые зарегистрированные пользовательские свойства, возможно, удалить любые префиксные свойства,преобразуйте offset в cssOffset, а затем запустите их через setKeyframes()/getKeyframes(), чтобы увидеть, какие из них поддерживает анимацию в браузере.

...