Проблема с анимацией CSS с изображением

У меня есть следующий код, который имеет проблему (см. Ниже).Проблема с анимацией CSS с изображением

<!DOCTYPE html> 
<head> 
    <title>Duck</title> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    <link rel-"stylesheet" href="animate.css"> 
    <!-- Tab Title --> 
</head> 
<body> 
    <div> 
     <div id = "header"> 
      <img class = "duck animated zoomIn" src = "https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /> 
     </div> 
     <!-- Main Header -->  
    </div> 
</body>

Файл main.css показан здесь

 #header { 
     padding:10px 0 0 0 ; 
    } 

    img.duck { 
     margin-left: auto; 
     margin-right: auto; 
     display:block; 
    } 

    #page { 
     margin: 0px auto; 
    }

Я использую daneden animate.css файл (https://daneden.github.io/animate.css/), который имеет CSS файл (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css) полный анимации.

Теперь утка находится посередине страницы, но не оживляет. Это просто не работает.

Любые решения? Thanks, Dave.

источник

2015-10-25 Bob Smith

Почему масштаб в? – Daemedeor

@Daemedeor Мне это нравится :) –

Вы сделали ошибку здесь

<link rel-"stylesheet" href="animate.min.css">

Он должен быть знак = после отн

источник

2015-10-25 09:56:29

-_- должен был его увидеть! Так или иначе, отладчик не взял его. БЛАГОДАРЯ! –

Случается всем, рад помочь :-) –

<link rel-"stylesheet" href="animate.css">

не является правильным. Пожалуйста, добавьте:

<link rel="stylesheet" href="animate.css">

Пожалуйста, замените rel= после rel-.

источник

2015-10-25 10:03:18

Должно быть rel="stylesheet";

Fiddle: https://jsfiddle.net/ypdahLtt/1/

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

Для этого случая Использование: alt="The Duck" Атрибут для вашего изображения ... Тогда для загрузки в первый раз вы можете увидеть текст анимированный.

источник

2015-10-25 10:03:28 TipuZaynSultan

Проблема с анимацией CSS с изображением

ответ

Смежные вопросы