CSS3动画旋转 [英] CSS3 Rotate Animation

问题描述

 ＆LT; IMG类=形象SRC =ALT =WIDTH =120HEIGHT =120＆GT;
 

不能得到这个动画形象的工作，这是应该做一个360度的旋转。
我想什么是错的与下面的CSS，因为它只是停留不动。

  {图像配
    浮动：左;
    保证金：0汽车;
    位置：绝对的;
    顶部：50％;
    左：50％;
    宽度：120像素;
    高度：120像素;
    的margin-top：-60px;
    保证金左：-60px;    -webkit-动画名称：旋;
    -webkit-动画持续时间：4000ms;
    -webkit-动画迭代计数：无限;
    -webkit-动画定时功能：线性的;    -moz-动画名称：旋;
    -moz-动画持续时间：4000ms;
    -moz-动画迭代计数：无限;
    -moz-动画定时功能：线性的;    -ms动画名称：旋;
    -ms动画持续时间：4000ms;
    -ms动画迭代计数：无限;
    -ms动画定时功能：线性的;    动画名称：旋;
    动画持续时间：4000ms;
    动画迭代计数：无限;
    动画定时功能：线性的;    @ -ms关键帧旋转{
        从{
            -ms变换：旋转（0deg）;
        } 至 {
            -ms变换：旋转（360deg）;
        }
    }
    @ -moz-关键帧旋转{
        从{
            -moz-变换：旋转（0deg）;
        } 至 {
            -moz-变换：旋转（360deg）;
        }
    }
    @ -webkit-关键帧旋转{
        从{
            -webkit-变换：旋转（0deg）;
        } 至 {
            -webkit-变换：旋转（360deg）;
        }
    }
    @keyframes旋{
        从{
            变换：旋转（0deg）;
        } 至 {
            变换：旋转（360deg）;
        }
    }
}
 

解决方案

下面是一个 演示 。正确的动画CSS：

\r

\r

{图像配\r
    位置：绝对的;\r
    顶部：50％;\r
    左：50％;\r
    宽度：120像素;\r
    高度：120像素;\r
    保证金：-60px 0 0 -60px;\r
    -webkit-动画：旋4S线性无穷;\r
    -moz-动画：旋4S线性无穷;\r
    动画：旋4S线性无穷;\r
}\r
@ -moz-关键帧旋{100％{-moz-变换：旋转（360deg）; }}\r
@ -webkit-关键帧旋{100％{-webkit-变换：旋转（360deg）; }}\r
@keyframes旋{100％{-webkit-变换：旋转（360deg）;变换：旋转（360deg）; }}

\r

＆LT; IMG类=形象SRC =HTTP：//我。 stack.imgur.com/pC1Tv.jpgALT =WIDTH =120HEIGHT =120＆GT;

\r

\r

\r

---

在你的code一些注意事项：

1. 您已经嵌套在在图像配规则内的关键帧，这是不正确


2. 浮动：左将无法正常工作的绝对定位的元素


3. 看一看 caniuse ：IE10不需要 -ms- preFIX

<img class="image" src="" alt="" width="120" height="120">

Can not get this animated image to work, it is supposed to do a 360 degrees rotation. I guess something's wrong with the CSS below, as it just stays still.

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}

解决方案

Here is a demo. The correct animation CSS:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

---

Some notes on your code:

1. You've nested the keyframes inside the .image rule, and that's incorrect
2. float:left won't work on absolutely positioned elements
3. Have a look at caniuse: IE10 doesn't need the -ms- prefix

这篇关于CSS3动画旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！