1

Делаю все, как надо : Скачал файл, подключил, ввел в классе элемента "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 class="header">
      <div class="container">
        <div class="row">
          <div class="col-lg-3">
            <img src="img/logo.png" alt="Logo" class="logo">
          </div>
          <div class="col-lg-5 ml-auto ">
            <nav>
              <ul class="menu d-flex justify-content-center">
                <li class="menu__item">
                  <a href="#">Features</a>
                </li>
                <li class="menu__item">
                  <a href="#">Support</a>
                </li>
                <li class="menu__item">
                  <a href="#">Blog</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-6">
            <div class="offer">
              <h1 class="offer__title">
                Inspire your inspiration
              </h1>
              <div class="offer__intro">
                Simple to use for your app, products <br> showcase and your inspiration
              </div>
              <p class="offer__text animated fadeInLeft">
                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 class="icons d-flex">
                <li class="icons__item">
                  <a href="#"><i class="fab fa-apple"></i></a>
                </li>
                <li class="icons__item">
                  <a href="#"><i class="fab fa-android"></i></a>  
                </li>
                <li class="icons__item">
                  <a href="#"><i class="fab fa-windows"></i></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </header>

  </body>
</html>

5
  • 4
    откуда мы знаем? может вы криво подключили, может вы не так что-то написали, может файл вообще пустой, может у вас ошибка где-то
    – meine
    30 июл 2019 в 18:12
  • @meine Добавил код
    – Vladislove
    30 июл 2019 в 19:56
  • animate.css точно подключается на страницу? посмотрите в консоли на наличие ошибок. В сниппете, что вы привели у элемента .animate.fadeInLeft нет никаких стилей для анимации, поэтому в данном случае анимации нет
    – Skywave
    31 июл 2019 в 4:22
  • @Famous, у Вас при входе на сайт не показывается такое сообщение? Скриншот: take.ms/W3yj8
    – hisbvdis
    31 июл 2019 в 7:20
  • @hisbvdis да, есть такое сообщение
    – Vladislove
    31 июл 2019 в 7:49

1 ответ 1

1

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.