Можно ли сделать градиент текста, который плавно бы изменял цвет вместе с углом начала самого градиента?

Question

[DoubleWish]

Всем счастья ;)
Есть статический текст и он статически через css окрашен в градиент, возможно ли реализовать плавное изменение самого градиента и угла его наклона c помощью js (jquery)? При том не от наведения, а просто по сценарию.

Answer 1

[yttrium]

CSS3 умеет так делать
Для вашего случая примерно так

#mydiv {
    -webkit-animation: myAnimate 5s; /* Chrome, Safari, Opera */
    animation: myAnimate 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myAnimate {
    from {
      background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
      background: linear-gradient(180deg, red, blue); /* Standard syntax */
    }
    to {
      background: -webkit-linear-gradient(0deg, blue, red); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(0deg, blue, red); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(0deg, blue, red); /* For Firefox 3.6 to 15 */
      background: linear-gradient(0deg, blue, red); /* Standard syntax */
    }
}

/* Standard syntax */
@keyframes myAnimate {
    from {
      background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
      background: linear-gradient(180deg, red, blue); /* Standard syntax */
    }
    to {
      background: -webkit-linear-gradient(0deg, blue, red); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(0deg, blue, red); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(0deg, blue, red); /* For Firefox 3.6 to 15 */
      background: linear-gradient(0deg, blue, red); /* Standard syntax */
    }
}

Вернее вместо #mydiv задать свой класс, например, myAnimationGradient. и в необходимый момент производить $myTargetElement.toggleClass('myAnimationGradient')

Answer 2

[Юрий Лобанов]

Скорее всего можно с использование svg
Приведите пример Вашего кода

Comments

[DoubleWish]

кода нет вообще, просто интересует сама возможность.

[Юрий Лобанов]

@ZeroPT я думаю, что это сделать можно :) Опишите подробнее, пожалуйста. Нужна анимация бэкграунда текста?

вроде этого, но чтобы он изменялся?
Смотрите в сторону svg масок.