CSS Видимость Анимация Не работает

Я хочу сделать анимацию на основе ключевого кадра на свойстве CSS видимости. Сначала я попробовал его на "дисплее", но обнаружил, что анимация на "дисплее" не поддерживается, но "видимость" есть. Идея состоит в том, чтобы сделать видимость переключения прямоугольника. Я не хочу использовать jquery и хочу реализовать все это в CSS. Ниже приведен мой код, но он не дает ожидаемого результата прямоугольника, остающегося скрытым до 5-й секунды, появляющегося и затем снова исчезающего в конце анимации

  <head>
      <style type="text/css">
     #layer1 {            
                -moz-animation-duration: 10s;                
        -moz-animation-name: toggle;
     }

     @-moz-keyframes toggle {
             from {
                visibility:hidden;
             }

         50% {
                    visibility:visible;
             }

         to {
         visibility:hidden;
          }
   }

  </style>

  <script type="application/javascript">
      window.onload = function()              
      {
           var c = document.getElementById('layer1');
           var ctxt = c.getContext('2d');
           ctxt.fillStyle = 'red';
           ctxt.fillRect(0,0,200,200);
           ctxt.fillStyle = 'green';
           ctxt.fillRect(0,0,100,100);
      }

  </script>


  <body>

        <canvas id="layer1" width="200" height="200" >         
   </canvas>

  </body>


</html>

Ответы

Ответ 1

Свойство видимости (и отображения) не может быть анимировано. Элемент либо видимый, либо нет. Попробуйте вместо этого свойство opacity:

@-moz-keyframes toggle {
    from {
        opacity:0;
    }

    50% {
        opacity:1;
    }

    to {
        opacity:0;
    }
}

Ответ 2

Переход или анимация CSS на свойство видимости сохраняет видимый элемент на время перехода, а затем резко применяет новое значение. (предполагая текущую спецификацию и до тех пор, пока не используется специальная функция синхронизации). Переходы/анимации на видимость не показывают постепенное изменение визуальный эффект, однако, когда я прочитал вопрос, идея действительно чтобы сохранить элемент до 5-й секунды.

Ваша анимация CSS определяет первый переход от 0% до 50% превращение из скрытого в видимое, которое показывает элемент в соответствии с к правилу выше, а затем вы указываете переход от 50% к 100% от видимого до скрытого, что также показывает элемент while играть. Таким образом, элемент постоянно отображается.

Задав

@keyframes toggle {
         from {
            visibility:hidden;
         }
     50% {
            visibility:hidden;
         }
     to {
            visibility:visible;
      }
 }

элемент останется скрытым до 50%, а затем внезапно появится. Чтобы скрыть его в конце, вам нужно добавить видимость: скрытый основное правило таблицы стилей не относится к ключевым кадрам. Также см. Мое сообщение в блоге о видимости перехода CSS http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility