Бесконечное вращение CSS, работающее в Firefox, но не в Chrome

Может кто-нибудь мне помочь, пожалуйста. Я начинаю с анимации css и преобразует. Я хочу бесконечное вращение деления (с svg внутри). Моя css/html5 concoction отлично работает в Firefox, но не в Google Chrome. Я не уверен, где проблема. Это ссылка:Бесконечное вращение CSS, работающее в Firefox, но не в Chrome

Infinite CSS Rotation

И второй шаг, который я хочу, чтобы контролировать анимацию с помощью JQuery. Это снова не работает в Chrome, но в FF. Ссылка на расширенном примере:

Infinite CSS Rotation with jQuery control

Любой ключ будет высоко ценится.

источник

2014-01-20 Klaus

Это [HTML5 SVG не рабочий .. .] (http://stackoverflow.com/questions/2981436/html5-svg-not-working) может быть вам полезна, поскольку я заметил, что файл был .svg. – Craighead

Попробуйте это, вы забыли @keyframe и -webkit-

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Rotate Infinitely</title> 
    <style type="text/css"> 
     #container { 
      background-color:rgba(245, 168, 66, 0.4); 
      height:250px; 
      margin:50px auto; 
      width:250px;} 
     #rotate1 { 
      -webkit-animation: rot_inf 5s infinite linear; 
      animation: rot_inf 5s infinite linear; 
     } 
     @keyframes rot_inf { 
      from { 
       -webkit-transform: rotate(0deg); 
       transform: rotate(0deg); 
       /* transform-origin: 50% 50%; */} 
      to { 
       -webkit-transform: rotate(360deg);   
       transform: rotate(360deg); 
       /* transform-origin: 50% 50%; */} 
     } 
     @-webkit-keyframes rot_inf { 
      from { 
       -webkit-transform: rotate(0deg); 
       transform: rotate(0deg); 
       /* transform-origin: 50% 50%; */} 
      to { 
       -webkit-transform: rotate(360deg);   
       transform: rotate(360deg); 
       /* transform-origin: 50% 50%; */} 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div id="rotate1"><img width="250" height="250" alt="cog" src="http://testline.memetic-tv.net/css_rotate_infinite/img/cogwheel2.svg"></div> 
    </div> 
</body> 
</html>

источник

2014-01-20 16:27:14

Префиксная версия должна идти ** перед ** неподписанная одна –

Вот простой пример, основанный на: http://css-tricks.com/snippets/css/keyframe-animation-syntax/

в нижней части страницы, она обеспечивает WebKit анимацию демо, которое я отредактированный в порядке продемонстрировать -webkit-animation-play-state

jsfiddle

Короче это может быть достигнуто путем определения текущего состояния анимации, и на основе этого установить -webkit-animation-play-state к running или paused

HTML:

<img src="http://files.simurai.com/misc/sprite.png" /> 
<div class="hi"></div> 
<a href="#">click</a>

ЯШ:

$('a').click(function(){ 
    var $p = $('.hi'); 
    var state = $p.css("-webkit-animation-play-state") 
    console.log(state); 

    if (state == "running"){ 
     $p.css("-webkit-animation-play-state", "paused"); 
    } else { 
     $p.css("-webkit-animation-play-state", "running"); 
    } 

    return false; 

})

CSS:

.hi {  
    width: 50px; 
    height: 72px; 
    background-image: url("http://files.simurai.com/misc/sprite.png");  

    -webkit-animation: play .8s steps(10) infinite; 
     -moz-animation: play .8s steps(10) infinite; 
     -ms-animation: play .8s steps(10) infinite; 
     -o-animation: play .8s steps(10) infinite; 
      animation: play .8s steps(10) infinite; 
} 

@-webkit-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
} 

@-moz-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
} 

@-ms-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
} 

@-o-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
} 

@keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
}

источник

2014-01-20 16:36:13 Syd

'-ms-' никогда не понадобилась, IE10 - это первый IE, поддерживающий анимацию CSS, и ему не нужен префикс. '-moz-' устарел в Firefox 16 (2012). '-o-' также может быть пропущен, так как Opera теперь основана на Chromium и использует префиксы '-webkit-'. ** В основном ** нужны только '@ -webkit-ключевые кадры' и' @ ключевые кадры'. –

Да, сначала Викас был прав, я забыл (или тупо пропустил) префикс -webkit для раздела ключевых кадров. Это была главная проблема. – Klaus

Затем, второе, что bfred.it говорит о необходимых соответственно ненужных префиксах, является правильным. Требуется только -webkit. Все остальное было бы излишним. Сказав, что концепция Панайотиса об использовании состояния анимации для основывания условного утверждения является хорошим предложением.Спасибо всем. – Klaus

Rotate деления бесконечен с помощью CSS и HTML

кода КССА:

<style> 
div{ 
height:200px; 
width:200px; 
-webkit-animation: spin 2s infinite linear; 
} 
@-webkit-keyframes spin { 
0% {-webkit-transform: rotate(0deg);} 
100% {-webkit-transform: rotate(360deg);} 
} 
</style>

DIV в HTML

<html> 
<body> 
<div><img src="xyz.png" height="200px" width="200px"/></div> 
</body> 
</html>

в DIV Образ повернуть бесконечен

источник

2017-05-31 05:22:06

Бесконечное вращение CSS, работающее в Firefox, но не в Chrome

ответ

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