Jak odtwarzać przejścia CSS3 w pętli?

Question

Poniższy styl to tylko przykład ustawienia przejść w CSS3.
Czy istnieje czysta sztuczka CSS, aby ta gra była odtwarzana w pętli?

div { 
    width:100px; 
    height:100px; 
    background:red; 
    transition:width 0.1s; 
    -webkit-transition:width 0.1s; /* Safari and Chrome */ 
    -moz-transition:width 0.1s; /* Firefox 4 */ 
    -o-transition:width 0.1s; /* Opera */ 
    transition:width 0.1s; /* Opera */ 
} 

div:hover { 
    width:300px; 
} 

Answer 1

Przejścia CSS są animowane tylko z jednego zestawu stylów; to czego szukasz, to CSS animations.

Musisz określić klatek kluczowych animacji i stosować go do elementu:

@keyframes changewidth { 
    from { 
    width: 100px; 
    } 

    to { 
    width: 300px; 
    } 
} 

div { 
    animation-duration: 0.1s; 
    animation-name: changewidth; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
} 

sprawdzić link powyżej, aby dowiedzieć się, jak dostosować ją do swoich potrzeb, a będziesz musiał dodawać przedrostki przeglądarek .