Плавная заливка текста через fill

360

19 мая 2017, 15:23

Как залить текст через fill плавно?

В этом коде текст заливается цветом резко, когда анимация доходит до 90%, как залить его вместе с анимацией?

Вот код самой анимации:

.text-copy {
  fill: none;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-name:stroke-offset;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  stroke: #FDF590 ;
  stroke-dasharray: 7% 28%;
  stroke-width: 3px;
  }
  .text-copy:nth-child(1) {
    stroke: #F3D881  ;
    stroke-dashoffset: 7%; }
  .text-copy:nth-child(2) {
    stroke: #F3D881  ;
    stroke-dashoffset: 14%; }
  .text-copy:nth-child(3) {
    stroke: #F3D881  ;
    stroke-dashoffset: 21%; }
  .text-copy:nth-child(4) {
    stroke: #F3D881  ;
    stroke-dashoffset: 28%; }
  .text-copy:nth-child(5) {
    stroke-dashoffset: 35%; }
@keyframes stroke-offset {
  90% {
    fill:#F3D881  ;
    stroke-dashoffset: 35%;
    stroke-dasharray: 87.5%; } }

Знаю что есть transition и прочее, как его применить?

Answer 1

Вам необходимо задать начальный цвет для fill, например transparent.

.text-copy { 
  fill: transparent; 
  animation-fill-mode: forwards; 
  animation-timing-function: linear; 
  animation-name:stroke-offset; 
  animation-duration: 8s; 
  animation-iteration-count: infinite; 
 
  stroke: #FDF590; 
  stroke-dasharray: 7% 28%; 
  stroke-width: 3px; 
} 
 
  .text-copy:nth-child(1) { 
    stroke: #F3D881  ; 
    stroke-dashoffset: 7%; } 
  .text-copy:nth-child(2) { 
    stroke: #F3D881  ; 
    stroke-dashoffset: 14%; } 
  .text-copy:nth-child(3) { 
    stroke: #F3D881  ; 
    stroke-dashoffset: 21%; } 
  .text-copy:nth-child(4) { 
    stroke: #F3D881  ; 
    stroke-dashoffset: 28%; } 
  .text-copy:nth-child(5) { 
    stroke-dashoffset: 35%; } 
 
@keyframes stroke-offset { 
  90% { 
    fill: #F3D881; 
    stroke-dashoffset: 35%; 
    stroke-dasharray: 87.5%; 
  } 
}

<svg class=text-copy> 
  <rect width="100" height="100" /> 
</svg>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

CSS классы в массив

Имеется css файл, как получить все CSS классы в PHP массив, таким образом, что бы каждый элемент массива являлся классом со всеми свойствами

306

MySQL

Как создать триггер AFTER INSERT с 'ORDER BY'?

Триггер к таблице написан следующим образом:

286

MySQL

Вывести результат выборки из 2х таблиц

В БД есть 2 таблицы: Куплено и Продано, в которых записаны соответствующие операции, примерно так :

274

MySQL

MySQL: выбрать число с плавающей точкой и перенести его в другой столбец

Здравствуйте!

218