Question

我希望这个动画每隔5秒发生一次。这是我的代码

的CSS：

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 1s infinite; /* Chrome, Safari, Opera */
    animation: mymove 1s infinite;
    -webkit-animation-delay: 1s; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {-webkit-transform:rotatey(0deg);}
    to {-webkit-transform:rotatey(180deg);}
}

@keyframes mymove {
    from {-webkit-transform:rotatey(0deg);}
    to {-webkit-transform:rotatey(180deg);}
}

HTML：

<div></div>

Answer 1

这应该可以解决问题：

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 7s infinite; /* Chrome, Safari, Opera */
    animation: mymove 7s infinite;
    -webkit-animation-delay: 1s; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
     0% {-webkit-transform:rotatey(0deg);}
    14.29% {-webkit-transform:rotatey(180deg);}
    28.57% {-webkit-transform:rotatey(0deg);} 
}

@keyframes mymove {
     0% {transform:rotatey(0deg);}
    14.29% {transform:rotatey(180deg);}
    28.57% {transform:rotatey(0deg);} 
}

在Chrome和Firefox上测试过。

http://jsfiddle.net/58dex5oq/

是否有任何方法可以转换CSS3动画属性：rotatey（90deg）每隔5s应用一次只有css3的无限动画？

1 个答案: