Question

请帮助我有人帮助我。我开始使用CSS动画和变换。我想要的是一个师的无限旋转（里面有svg）。我的css / html5混合在Firefox中运行良好，但在谷歌浏览器中运行不正常。我不确定问题出在哪里。这是链接：

第二步我想用jQuery控制动画。这在Chrome中无效，但在FF中无效。此扩展示例的链接：

Infinite CSS Rotation with jQuery control

任何线索都将非常感激。

Answer 1

试试这个，你忘记了@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>

Answer 2

以下是一个基于以下内容的简单示例： 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>

JS：

$('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; }
}

Answer 3

使用css和html

旋转除数

css代码是：

 public ActionResult About([DataSourceRequest]DataSourceRequest request)
 {
   ...
   return View(listSD);
 }

HTML中的div

<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中图像旋转无限

无限的CSS旋转在Firefox中有效但在Chrome中无效

3 个答案: