CSS текст покачивание анимация больше не работает на Chrome/Firefox, но работает на грани

Это сайт о котором идет речь: http://dilanianart.me/CSS текст покачивание анимация больше не работает на Chrome/Firefox, но работает на грани

Я построил около 8 месяцев назад (первый сайт когда-либо сделал), и это было покачивание анимации подобное изображенному здесь:

CSS Text Wiggle

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

Анимация, используемая для работы, теперь я зашла на сайт и больше не работала на своей веб-странице.

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

HTML:

<body> 
    <div id="wrapper"> 
     <div id="header"> 
     <a href=index.html>DilanianArt.me</a> 
     </div> 
     <div id="nav"> 
     <li><a href=info.html class="wiggle-me">Info</a></li> 
     <li><a href=flora.html class="wiggle-me">Flora</a></li> 
     <li><a href=legends.html class="wiggle-me">Legends</a></li> 
     <li><a href=portraits.html class="wiggle-me">Portraits</a></li> 
     </div> 
     <div id="content"> 
     <div class="flexslider"> 
      <ul class="slides"> 
       <li> 
        <img class="index" src="images/portraits/1.jpg" alt=" "> 
       </li> 
       <li> 
        <img class="index" src="images/legends/2.jpg" alt=" "> 
       </li> 
       <li> 
        <img class="index" src="images/flora/9.jpg" alt=" "> 
       </li> 
       <li> 
        <img class="index" src="images/portraits/4.jpg" alt=" "> 
       </li> 
       <li> 
        <img class="index" src="images/flora/2.jpg" alt=" "> 
       </li> 
      </ul> 
     </div> 
     </div> 
     <div id="footer"> 
     <li>Copyrights 1-1985043901 Registered VAu001195524</li> 
     </div> 
    </div> 
</body>

CSS:

@-ms-keyframes wiggle { 
    0% { 
     -ms-transform:rotate(2deg); 
    } 
    50% { 
     -ms-transform:rotate(-2deg); 
    } 
    100% { 
     -ms-transform:rotate(2deg); 
    } 
} 

@-moz-keyframes wiggle { 
    0% { 
     -moz-transform:rotate(2deg); 
    } 
    50% { 
     -moz-transform:rotate(-2deg); 
    } 
    100% { 
     -moz-transform:rotate(2deg); 
    } 
} 

@-webkit-keyframes wiggle { 
    0% { 
     -webkit-transform:rotate(2deg); 
    } 
    50% { 
     -webkit-transform:rotate(-2deg); 
    } 
    100% { 
     -webkit-transform:rotate(2deg); 
    } 
} 

@keyframes wiggle { 
    0% { 
     transform:rotate(2deg); 
    } 
    50% { 
     transform:rotate(-2deg); 
    } 
    100% { 
     transform:rotate(2deg); 
    } 
} 


a.wiggle-me:hover { 
    -ms-animation: wiggle .7s 30; 
    -moz-animation: wiggle .7s 30; 
    -webkit-animation: wiggle .7s 30; 
    animation: wiggle .7s 30; 
}

источник

2016-02-06 NutellaAddict

Ваш сайт не работает для меня, и он выходит из строя каждый раз, когда я пытаюсь проверить его с помощью Dev Tools, но у меня есть что анимация не работает, потому что элемент 'inline' (по умолчанию элементы' a' являются встроенными). Преобразования CSS не работают на элементах 'inline', как я упоминал здесь, - http://stackoverflow.com/questions/35183494/css3-animations-dont-always-run-when-display-attribute-is-set-on -a-pseudo-ele/35192803 # 35192803 Проверьте, не решена ли эта проблема. – Harry

Я думаю, что вам нужно еще несколько префиксов поставщика в анимации цепочки, чтобы сделать его действительно кросс-браузер.

.wiggle-me { 
    display: inline-block; 
} 

@-moz-keyframes wiggle { 
    0% { 
     -moz-transform: rotate(2deg); 
    } 
    50% { 
     -moz-transform: rotate(-2deg); 
    } 
    100% { 
     -moz-transform: rotate(2deg); 
    } 
} 

@-webkit-keyframes wiggle { 
    0% { 
     -webkit-transform: rotate(2deg); 
    transform: rotate(2deg); 
    } 
    50% { 
     -webkit-transform: rotate(-2deg); 
    transform: rotate(-2deg); 
    } 
    100% { 
    -webkit-transform: rotate(2deg); 
    transform: rotate(2deg); 
    } 
} 

@keyframes wiggle { 
    0% { 
    -moz-transform: rotate(2deg); 
    -webkit-transform: rotate(2deg); 
    transform: rotate(2deg); 
    } 
    50% { 
     -moz-transform: rotate(-2deg); 
    -webkit-transform: rotate(-2deg); 
    transform: rotate(-2deg); 
    } 
    100% { 
     -moz-transform: rotate(2deg); 
    -webkit-transform: rotate(2deg); 
    transform: rotate(2deg); 
    } 
}

источник

2016-02-06 21:52:02

, который не работал ... и не копировал код css по этой ссылке: http://www.websitecodetutorials.com/code/css/css3-wiggle-on-hover.php, который действительно работает на хроме. так что на моей веб-странице есть что-то, что препятствует работе в chrome и firefox, любые идеи? – NutellaAddict

Посмотрел на ваш код еще раз. Попробуйте установить ссылки на встроенный блок (.wiggle-me {display: inline-block;}. Преобразования не работают на встроенных элементах (согласно спецификациям). Добавил его также в код выше! –

nope, no luck =/ – NutellaAddict

Вы пропускаете префикс поставщика для WebKit в ключевом кадре:

@-webkit-keyframes wiggle { 
0% { 
    -webkit-transform: rotate(2deg); 
} 
50% { 
    -webkit-transform: rotate(-2deg); 
} 
    100% { 
    -webkit-transform: rotate(2deg); 
    } 
}

источник

2016-02-06 21:54:20

Это была моя ошибка, я скопировал неправильный код. Но на веб-сайте, который я связал, он содержит правильный формат css – NutellaAddict

CSS текст покачивание анимация больше не работает на Chrome/Firefox, но работает на грани

ответ

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