Как сделать радиальную заливку?

Question

[Skrolea]

Добрый день. Хочу сделать, чтобы при нажатии на меню (гамбургер) от этой кнопки шла радиальная заливка (animate) на весь экран. Что для этого надо сделать? При нажатии нарисовать какой нибудь

#circle {
      width: 50px;
      height: 50px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: red;
    }

на месте кнопки и как-то transform на весь экран?
Codepen

Answer 1

[Андрей Федоров]

На css будет работать только в webkit браузерах. Точнее там где поддерживаются @keyframes
codepen.io/aliencash/pen/EymLAk?editors=1100

Comments

[Skrolea]

Да, спасибо. Ну вроде нормально же с анимацией caniuse.com/#search=keyframes

[Андрей Федоров]

Skrolea: Хм, у меня в ff не работает...

[Skrolea]

Наверное потому что CodePen добавляет inline css "@keyframes not supported in an inline or scoped stylesheet in Firefox (bug 830056)"