div/keyframes 자동 반전

Question

안녕하세요. 현재 커서를 가져 가거나 클릭하지 않고도 계속 회전시키려는 div가 있습니다. 여기에 그것이 현재 무엇인지 작동 jfiddle입니다. div가 일관되게 회전하도록하고 싶습니다. http://jsfiddle.net/CsDLG/1/

h3 { 
    font: 22px normal Futura, sans-serif; 
    color:#333; 
} 
#f1_container { 
    width:430px; 
    height:250px; 
    position:relative; 
    left:35px; 
    top:10px; 
    z-index:1; 
    -webkit-perspective:1000px; 
    -moz-perspective:1000px; 
    -o-perspective:1000px; 
    perspective:1000px; 
    margin:15px; 
    } 
    #f1_card { 
     width:100%; 
     height:100%; 
     -webkit-transform-style:preserve-3d; 
     -webkit-transition:all 1s linear; 
     -moz-transform-style:preserve-3d; 
     -moz-transition:all 1s linear; 
     -o-transform-style:preserve-3d; 
     -o-transition:all 1s linear; 
     transform-style:preserve-3d; 
     transition:all 1s linear; 
    } 
    #f1_container:hover #f1_card, #f1_container.hover_effect #f1_card { 
     -webkit-transform:rotateY(180deg); 
     -moz-transform:rotateY(180deg); 
     -o-transform:rotateY(180deg); 
     transform:rotateY(180deg); 
    } 
    .face { 
     position:absolute; 
     width:100%; 
     height:100%; 
     -webkit-backface-visibility:hidden; 
     -moz-backface-visibility:hidden; 
     -o-backface-visibility:hidden; 
     backface-visibility:hidden; 
    } 
    .face.back { 
     display:block; 
     -webkit-transform:rotateY(180deg); 
     -webkit-box-sizing:border-box; 
     -moz-transform:rotateY(180deg); 
     -moz-box-sizing:border-box; 
     -o-transform:rotateY(180deg); 
     -o-box-sizing:border-box; 
     transform:rotateY(180deg); 
     box-sizing:border-box; 
     color:#f5f5f5; 
     text-align:center; 
     background-color:#f5f5f5; 
     padding:10px; 
    } 
    .underz { 
     background:url(http://farm6.staticflickr.com/5069/5614374365_24c4fd01d2_z.jpg) center bottom; 
     width:430px; 
     height:250px; 
    } 





<div id="f1_container"> 
      <div id="f1_card" class="shadow"> 
       <div class="front face 1"> 
        <div class="underz"></div> 
       </div> 
       <div class="back face center"><h3>We work while we play and have fun!</h3> 
       </div> 
      </div> 
     </div> 

Answer 1

이렇게하려면 CSS3 애니메이션이 필요합니다. (이 기능은 Safari 및 Chrome에만 존재 함). 그런 다음 반복 계수 값을 무한대로 설정하십시오.

here is a demo

animation-iteration-count:infinite; 
-webkit-animation-iteration-count: infinite;