CSS анимация видимости не работает - PullRequest
Новая
       1

CSS анимация видимости не работает

11 голосов
/ 22 октября 2011

Я хочу сделать анимацию на основе ключевых кадров в свойстве 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>

Ответы [ 2 ]

11 голосов
/ 06 августа 2014

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

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

Указав 

@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

11 голосов
/ 22 октября 2011

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

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

    50% {
        opacity:1;
    }

    to {
        opacity:0;
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...