конвертировать SVG-анимацию в CSS-анимацию - PullRequest
Новая
       14

конвертировать SVG-анимацию в CSS-анимацию

0 голосов
/ 09 октября 2018

У меня есть свойства анимации непрозрачности SVG: 

<animate id="animation1"
        attributeName="opacity"
        from="1"
        to="0"
        dur="1s"
        begin="0.5s;animation2.end" />

    <animate id="animation2"
        attributeName="opacity"
        from="0"
        to="1"
        dur="2s" 
        begin="animation1.end" />

Мне нужны те же свойства в css3, которые я пробовал: 

        .opacity-animation{
            -webkit-animation-name: flickerAnimation;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-delay: 0.5s;
        }
        @keyframes flickerAnimation {
          0%   { opacity:1; }
          50%  { opacity:0; }
          100% { opacity:1; }
        }
        @-o-keyframes flickerAnimation{
          0%   { opacity:1; }
          50%  { opacity:0; }
          100% { opacity:1; }
        }
        @-moz-keyframes flickerAnimation{
          0%   { opacity:1; }
          50%  { opacity:0; }
          100% { opacity:1; }
        }
        @-webkit-keyframes flickerAnimation{
          0%   { opacity:1; }
          50%  { opacity:0; }
          100% { opacity:1; }
        }

, но он не работает так же, как анимация svg.Цикл непрозрачности кода CSS3 работает быстро.также посмотрите видео, как это работает сейчас. Ссылка на видео

1 Ответ

0 голосов
/ 09 октября 2018
  • продолжительность первой анимации SMIL: 1 с
  • продолжительность второй анимации SMIL: 2 с
  • составляет всего 3 с для цикла, 33% для первой части,67% за секунду.

Кроме того, стандарт SMil для интерполяции составляет linear, а не некоторое ослабление. 

opacity-animation{
        animation-name: flickerAnimation;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-delay: 0.5s;
}
@keyframes flickerAnimation {
    0%   { opacity:1; }
    33%  { opacity:0; }
    100% { opacity:1; }
}
...