Как можно сократить css код для svg анимации?

Question

[PandaDrummer]

Привет! Начал изучать svg анимацию и столкнулся с проблемой.Дело в том,что код в css становится громоздким. Например,чтобы оптимизировать для всех браузеров приходиться писать это (а ведь это только один элемент из svg).

.cls-1 {
  stroke: #000;
  fill: gray;
  stroke-width: 0.5;
  stroke-dasharray: 113;
  animation: anim2-3 3s ease-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation: anim2-3 3s ease-out;
  -moz-animation:    anim2-3 3s ease-out;
  -o-animation:      anim2-3 3s ease-out;
}
@-webkit-keyframes anim2-3 {
  0% {
    fill: none;
    stroke-dashoffset: 113;
  }

  80% {
    fill: rgba(128, 128, 128, 0);
  }

  100% {
    stroke-dashoffset: 0;
    fill: rgba(128, 128, 128, 1);
  }
}
@-moz-keyframes anim2-3 {
  0% {
    fill: none;
    stroke-dashoffset: 113;
  }

  80% {
    fill: rgba(128, 128, 128, 0);
  }

  100% {
    stroke-dashoffset: 0;
    fill: rgba(128, 128, 128, 1);
  }
}
@-o-keyframes anim2-3 {
  0% {
    fill: none;
    stroke-dashoffset: 113;
  }

  80% {
    fill: rgba(128, 128, 128, 0);
  }

  100% {
    stroke-dashoffset: 0;
    fill: rgba(128, 128, 128, 1);
  }
}
@keyframes anim2-3 {
  0% {
    fill: none;
    stroke-dashoffset: 113;
  }

  80% {
    fill: rgba(128, 128, 128, 0);
  }

  100% {
    stroke-dashoffset: 0;
    fill: rgba(128, 128, 128, 1);
  }
}

Заранее спасибо!

Answer 1

[Chvalov]

SCSS (SASS) и вынеси значения в переменные

Answer 2

[Максим]

-moz- и -o- можно не писать
animation: 'name' 'time' 'animation-timing-function' 'animation-iteration-count'
ну вот собственно всё
ну и минифицировать css
вы ещё о Smil не знаете ...

Answer 3

[Андрей Гончаров]

Autoprefixer же спешл фор ю.
А второе - для svg анимаций лучше заюзать js либу какую-нибудь типа Anime.js