Css animation не работает: html — Почему не работает animation и @keyframes

Leave a Comment / Css / By /

html — Не работает Animate.css

Задать вопрос

Вопрос задан

Изменён 3 года 4 месяца назад

Просмотрен 3k раз

Делаю все, как надо : Скачал файл, подключил, ввел в классе элемента «animated fadeInLeft», но анимация не работает, при чем ни одна из анимаций не работают. У меня даже на сайте Animate.css не работает ни одна анимация. В чем причина ?

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <title>Tinyone</title>

    <link href="https://fonts.
 
 googleapis.com/css?family=PT+Sans:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="css/animate.css">

    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <div>
        <div>
          <div>
            <img src="img/logo.png" alt="Logo">
          </div>
          <div>
            <nav>
              <ul>
                <li>
                  <a href="#">Features</a>
                </li>
                <li>
                  <a href="#">Support</a>
                </li>
                <li>
                  <a href="#">Blog</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>

        <div>
          <div>
            <div>
              <h2>
                Inspire your inspiration
              </h2>
              <div>
                Simple to use for your app, products <br> showcase and your inspiration
              </div>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent vitae eros eget tellus tristique bibendum. Donec rutrum sed sem quis venenatis. Proin viverra risus a eros volutpat tempor. In quis arcu et eros porta lobortis sit 
              </p>
              <ul>
                <li>
                  <a href="#"><i></i></a>
                </li>
                <li>
                  <a href="#"><i></i></a>  
                </li>
                <li>
                  <a href="#"><i></i></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </header>

  </body>
</html>
  • html
  • css
  • animate

5

Я разобрался, в чем была проблема — я отключил анимацию у себя на компьютере.

Чтобы решить данную проблему, нужно : Мой Компьютер > ПКМ > Свойства > Дополнительные параметры системы > Быстродействие > Параметры >Поставить галочку «Анимированные элементы управления и элементы внутри окна».

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

transition — CSS | MDN

Свойство CSS transition — это сокращённое свойство для transition-property (en-US), transition-duration, transition-timing-function (en-US), и transition-delay (en-US).

Transition позволяет определять переходное состояние между двумя состояниями элемента. Различные состояния могут быть определены с помощью

псевдоклассов, таких как :hover или :active или установлены динамически с помощью JavaScript.

Начальное значениекак и у каждого из подсвойств этого свойства:
  • transition-delay (en-US): 0s
  • transition-duration: 0s
  • transition-property (en-US): всё
  • transition-timing-function (en-US): ease
Применяется квсе элементы, ::before и ::after псевдоэлементы
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
  • transition-delay
    (en-US): как указано
  • transition-duration: как указано
  • transition-property (en-US): как указано
  • transition-timing-function (en-US): как указано
Animation typediscrete
/* Применить к 1 свойству */
/* имя свойства | длительность */
transition: margin-left 4s;
/* имя свойства | длительность | задержка */
transition: margin-left 4s 1s;
/* имя свойства | длительность | временная функция | задержка */
transition: margin-left 4s ease-in-out 1s;
/* Применить к 2 свойствам */
transition: margin-left 4s, color 1s;
/* Применить ко всем изменённым свойствам */
transition: all 0. 5s ease-out;
/* Глобальные значения */
transition: inherit;
transition: initial;
transition: unset;

Свойство transition указывается как один или более одно-свойственных переходов (single-property transitions), разделённых запятой.

Каждый одно-свойственный transition описывает переход, который должен быть применён к одному свойству (или специальным значениям all и none). Это включает в себя:

  • ноль или одно значение, представляющее свойство, к которому должен быть применён переход. Это может быть одно из:
    • ключевое слово none
    • ключевое слово all
    • <custom-ident> именование свойства CSS.
  • ноль или одно <single-transition-timing-function> (en-US) значение, представляющее временну́ю функцию
  • ноль, одно или два <time> значения. Первое значение, которое может быть интерпретировано как время, присваивается transition-duration, а второе значение, которое может быть интерпретировано как время, присваивается
    transition-delay     (en-US).

Посмотрите, что предпринимается когда у списков значений свойств разные длины. Вкратце, избыточные свойства, не подлежащие анимации, игнорируются.

Формальное описание синтаксиса

transition = 
<single-transition># (en-US)  
"><single-transition> = 
[ (en-US) none | (en-US) <single-transition-property> ] (en-US)  || (en-US)
<time>                                   || (en-US)
<easing-function>                        || (en-US)
<time>                                   
"><single-transition-property> = 
all             | 
 (en-US)
<custom-ident>  
"><easing-function> = 
linear                          | (en-US)
<linear-easing-function>        | (en-US)
<cubic-bezier-easing-function>  | (en-US)
<step-easing-function>          
"><linear-easing-function> = 
linear( <linear-stop-list> )  
"><cubic-bezier-easing-function> = 
ease                                                | (en-US)
ease-in                                             | (en-US)
ease-out                                            | (en-US)
ease-in-out                                         | (en-US)
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  
"><step-easing-function> = 
step-start                                | 
 
(en-US)
step-end                                  | (en-US)
steps( <integer> [ (en-US), <step-position> ] (en-US)? (en-US) )  
"><linear-stop-list> = 
[ (en-US) <linear-stop> ] (en-US)# (en-US)  
"><step-position> = 
jump-start  | (en-US)
jump-end    | (en-US)
jump-none   | (en-US)
jump-both   | (en-US)
start       | (en-US)
end         
"><linear-stop> = 
<number>               && (en-US)
<linear-stop-length>? (en-US)  
"><linear-stop-length> = 
<percentage>{1,2} (en-US)

Примеры CSS переходов включены в главную статью о CSS переходах.

Specification
CSS Transitions
# transition-shorthand-property

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

[2] PPK test

  • Использование CSS переходов
  • TransitionEvent (en-US)

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

анимаций CSS не работают? Попробуйте эти исправления

CSS-анимация может порадовать посетителей веб-сайта, если все сделано правильно. Тем не менее, иногда их сложно изучить и настроить, в зависимости от того, насколько сложными вы хотите их сделать. Как и многие другие вещи в CSS, иногда CSS-анимация ведет себя совершенно не так, как вы ожидаете.

Например, анимация CSS требует, чтобы вы написали синтаксис определенным образом и включили определенные правила, чтобы все выглядело правильно. Кроме того, есть вероятность, что анимация может не работать в определенных браузерах или что ваша анимация может негативно повлиять на производительность страницы.

Чтобы помочь вам, мы собрали некоторые распространенные проблемы, с которыми сталкиваются начинающие разработчики (а иногда и опытные!) при создании CSS-анимации, и покажем, как их можно исправить.

Как решить распространенные проблемы с анимацией CSS

Независимо от того, работает ли ваша анимация не так, как предполагалось, или просто не работает вообще, вот несколько причин, почему и как вы можете их решить:

Нет правила @keyframes

В анимации CSS @keyframes 9Правило 0018 определяет, как выглядит анимация, или, точнее, какие стили элементов изменяются и когда. Без этого правила у вашего элемента не будет никакой анимации. Убедитесь, что ваше правило @keyframes существует и его имя совпадает с именем анимации для целевого элемента.

В приведенном ниже примере попробуйте раскомментировать правило @keyframes , чтобы активировать анимацию.

См. Проблемы с анимацией Pen css: нет ключевых кадров Кристины Перриконе (@hubspot) на CodePen.

 

Продолжительность анимации не задана

Даже если вы назначили элементу правило ключевых кадров, он все равно может не воспроизводиться, если вы не установили продолжительность анимации . По умолчанию цикл анимации CSS длится ноль секунд. Чтобы переопределить это, добавьте правило animation-duration к целевому элементу со значением секунд в том же блоке, что и animation-name .

Ниже попробуйте удалить комментарии вокруг animation-duration , чтобы исправить анимацию.

См. Проблемы с анимацией Pen css: нет продолжительности анимации от Кристины Перриконе (@hubspot) на CodePen.

 

Анимация воспроизводится только один раз

Аналогично, анимация CSS будет повторяться только один раз, если вы не укажете число итераций с помощью параметра animation-iteration-count . Это значение может быть определенным числом циклов или бесконечным , если вы хотите, чтобы анимация зацикливалась вечно.

Попробуйте раскомментировать 9Правило 0017 animation-iteration-count ниже.

См. Проблемы с анимацией Pen css: анимация воспроизводится один раз Кристиной Перриконе (@hubspot) на CodePen.

 

Анимированный элемент сбрасывается в конце

Допустим, у вас есть анимация, которая начинается в одном состоянии (например, черный текст) и заканчивается в другом состоянии (например, фиолетовый текст). Если эта анимация воспроизводится только один раз, вы, вероятно, захотите, чтобы цвет оставался фиолетовым после завершения анимации.

Однако по умолчанию анимация CSS возвращается к исходному состоянию элемента после завершения анимации. Из-за этого анимация может выглядеть сломанной.

Хорошей новостью является то, что у CSS-анимации есть решение — свойство animation-fill-mode . Это свойство предписывает анимированному элементу сохранять стили из первого и/или последнего ключевого кадра анимации.

Посмотрите пример ниже. После того, как цвет текста изменится на фиолетовый, вы увидите, что он снова станет черным. Но если мы раскомментируем правило animation-fill-mode: forwards; мы видим, что текст остается фиолетовым. Это связано с тем, что animation-fill-mode: forwards; берет стиль последнего ключевого кадра (фиолетовый текст) и применяет его к элементу после цикла анимации.

См. Проблемы с анимацией Pen css: сброс анимации от Кристины Перриконе (@hubspot) на CodePen.

 

Анимация начинается слишком рано

Иногда может потребоваться добавить короткую задержку перед началом анимации для удобства пользователей. Добейтесь этого с помощью свойства animation-delay . Ниже анимация имеет задержку 4 с (четыре секунды).

См. Проблемы с анимацией Pen css: анимация начинается слишком рано от Кристины Перриконе (@hubspot) на CodePen.

 

Неанимируемые свойства CSS

Другая причина, по которой ваша анимация не работает, может заключаться в том, что вы пытаетесь анимировать неанимируемое свойство CSS. Проверьте наш список анимируемых свойств CSS для свойства, которое вы пытаетесь анимировать, и убедитесь, что оно есть. В противном случае вам придется найти другой способ добиться подобного эффекта.

Кроме того, вы можете найти это свойство в справочнике свойств CSS Mozilla, а затем найти Тип анимации под Формальным определением . Эта документация покажет вам различные способы анимации свойства.

Анимация CSS не поддерживается

Анимация CSS работает в большинстве современных мобильных и настольных браузеров. Однако ваши анимации могут не работать, если вы используете старый браузер или версию браузера, которая не обновлялась несколько лет, просто из-за отсутствия поддержки браузера.

Если ваш браузер обновлен, но проблемы по-прежнему возникают, попробуйте добавить свои правила анимации с префиксами поставщиков в дополнение к исходным правилам и повторите попытку анимации. Например, префикс поставщика — webkit- (для браузеров Chrome и Safari) выглядит так применительно к анимации.

 
 @keyframes change-color { 
     25% { 
      -webkit-color: #00A4BD; 
      цвет: #00A4BD; 
    } 
    50% { 
      -webkit-color: #FF7A59; 
      цвет: #FF7A59; 
    } 
    75% { 
      -webkit-color: #00BDA5; 
      цвет: #00BDA5; 
    } 
    100% { 
      -webkit-color: #6A78D1; 
      цвет: #6A78D1; 
    } 
 } 
 p { 
    -webkit-animation-name: change-color; 
   имя-анимации: изменение цвета; 
    -webkit-animation-duration: 8s; 
   продолжительность анимации: 8 с; 
    -webkit-animation-delay: 4s; 
   задержка анимации: 4 с; 
    -webkit-animation-iteration-count: бесконечно; 
   количество-итераций-анимации: бесконечно; 
 
    семейство шрифтов: Arial; 
    размер шрифта: 26 пикселей; 
    начертание: 600; 
    выравнивание текста: по центру; 
 }

Как показывает этот код, всегда размещайте объявления с префиксами поставщиков перед объявлениями без префиксов поставщиков, чтобы правила префиксов поставщиков не переопределяли исходные правила.

Если вы хорошо разбираетесь в JavaScript, вы также можете обратиться к этому руководству, чтобы определить поддержку CSS-анимации в вашем браузере.

Сокращение CSS написано неправильно

Сокращение CSS — это хороший способ написать более чистый CSS и уменьшить объем кода в вашем файле. Свойство animation является сокращением для следующих свойств CSS:

  • animation-duration
  • имя-анимации
  • анимация-задержка
  • направление анимации
  • режим анимации-заполнения
  • число итераций анимации
  • анимация-воспроизведение-состояние
  • функция синхронизации анимации

Требуются два значения — одно для animation-duration и одно для animation-name . Кроме того, порядок значений определяет, какое значение присваивается какому свойству анимации. Неверные значения могут привести к тому, что анимация будет вести себя не так, как вы ожидаете. Итак, при использовании сокращенного свойства animation убедитесь, что его значения перечислены в правильном порядке.

Множественные неверные значения свойств анимации

Можно назначить несколько разных анимаций одному и тому же элементу с несколькими значениями, разделенными запятыми. В приведенном ниже примере я применил три разные анимации к одному п элемент.

См. Проблемы с анимацией Pen css: несколько анимаций Кристины Перриконе (@hubspot) на CodePen.

Обратите внимание, что имя-анимации и -продолжительность анимации имеют по три значения. Три значения animation-name назначают три разных правила ключевых кадров элементу p . Три значения animation-duration задают длину каждого цикла анимации соответственно — первая анимация, change-color длится восемь секунд, а два других — пять секунд.

При создании анимации таким образом убедитесь, что вы правильно упорядочиваете значения для каждого объявления animation-* . В противном случае ваши анимации не будут работать так, как вы планировали.

Если вы хотите применить одно и то же значение свойства ко всем анимациям, вам нужно включить только одно значение в объявление этого свойства. Я сделал это с animation-iteration-count в приведенном выше примере — все три анимации будут работать бесконечно.

Низкая производительность

Анимация CSS, как правило, более производительна, чем другие типы веб-анимации. Однако не все CSS-анимации одинаковы, и некоторые стили анимации снижают производительность больше, чем другие.

Большинство простых анимаций CSS не должны оказывать заметного влияния на время загрузки страницы. Однако чем больше эффектов вы добавляете к анимации, тем выше вероятность того, что вы столкнетесь с проблемами производительности.

Во избежание снижения производительности Google рекомендует ограничить использование анимаций, вызывающих перерисовку. Paint — это когда браузер создает визуальное отображение веб-страницы попиксельно на экране. Отрисовки требуют относительно большой вычислительной мощности, поэтому вам следует максимально ограничить количество перерисовок, вызванных анимацией.

К сожалению, большинство анимируемых свойств CSS вызывают перерисовку при изменении. Исключениями являются transform (для таких вещей, как масштаб, поворот и положение) и opacity , которые можно анимировать с минимальным влиянием на производительность. Вот ссылка, для которой свойства CSS запускают перерисовку при анимации.

Тем не менее, пусть это не отговаривает вас от полного отказа от анимации. Если у вас проблемы со скоростью, скорее всего, вы пытаетесь выполнить сразу несколько элементов или применяете анимацию к одному большому элементу или группе элементов. На веб-сайтах CSS-анимация лучше всего подходит для тонкого использования, чтобы улучшить впечатление, поэтому подумайте, нужна ли вам сложная анимация для привлечения посетителей.

Отладка анимации CSS с помощью инструментов разработчика

Стоит также упомянуть, что некоторые браузеры оснащены инструментами отладки анимации CSS. Если вы используете Google Chrome или Firefox, проверьте наличие в инструментах разработчика инспектора Animations .

Этот инструмент позволяет перезапустить, замедлить, приостановить и просмотреть временную шкалу анимации, чтобы точно увидеть, что делает браузер. Это может быть полезно, если у вас все еще есть проблемы с работой анимации, особенно более сложной.

Источник изображения

Устранение неполадок с анимацией CSS

Анимация иногда может быть неприятной, чтобы сделать ее правильно — хорошая новость заключается в том, что это делает ее еще более приятной, когда она работает. Как мы видели, существует несколько потенциальных причин ошибок анимации, но обычно это можно исправить, исправив часть синтаксиса или добавив новое правило.

CSS-анимации могут добавить много символов статической веб-странице, поэтому стоит немного поработать над устранением неполадок, чтобы сделать их идеальными.

html — Почему анимация CSS3 не работает?

спросил

Изменено 3 года, 5 месяцев назад

Просмотрено 62к раз

Может ли кто-нибудь помочь мне выяснить, почему анимация на элементе

не работает?

 #герой h5 {
  анимация: фейдейн 2с;
  -moz-анимация: фейд 2с; /* Fire Fox */
  -вебкит-анимация: фейд 2с; /* Сафари и Хром */
  -о-анимация: фейд 2с; /* Опера */
  вес шрифта: сильный;
  размер шрифта: 28px;
} 
 
<раздел>
    <дел>
        <дел>
            <дел>
                 
Название демо-версии Lorem Ipsum
  • HTML
  • CSS
  • CSS-анимация

7

Вы вызываете анимацию затухания в своем коде, но нигде ее не определили.

Анимации CSS3 определяются правилом @keyframes . Дополнительная информация об анимациях CSS3 находится здесь.

Добавьте следующий css:

 @keyframes fadein {
  от {
    непрозрачность: 0;
  }
  к {
    непрозрачность: 1;
  }
}
 
 #герой h5 {
  анимация: фейдейн 2с;
  -moz-анимация: фейд 2с; /* Fire Fox */
  -вебкит-анимация: фейд 2с; /* Сафари и Хром */
  -о-анимация: фейд 2с; /* Опера */
  вес шрифта: сильный;
  размер шрифта: 28px;
}

@ключевые кадры исчезают {
  от {
    непрозрачность: 0;
  }
  к {
    непрозрачность: 1;
  }
} 
 
<раздел>
  <дел>
    <дел>
      <дел>
         
Название демо-версии Lorem Ipsum