Как поворачивать текст/изображение каждые 2 секунды?

Question

я здесь код CSS, который может вращаться любое текст/изображение 180% по наведению:

.card-container { 
    height: 150px; 
    perspective: 600; 
    position: relative; 
    width: 150px; 
} 
.card { 
    height: 100%; 
    position: absolute; 
    transform-style: preserve-3d; 
    transition: all 1s ease-in-out; 
    width: 100%; 
} 
.card:hover { 
    transform: rotateY(180deg); 
} 
.card .side { 
    backface-visibility: hidden; 
    height: 100%; 
    position: absolute; 
    width: 100%; 
} 
.card .back { 
    transform: rotateY(180deg); 
} 

Могу ли я изменить что вращать каждые 2 секунды? Вместо того, чтобы просто ждать, чтобы кто-то навел курсор?

Answer 1

Используйте бесконечный animation, а не transition.

Example Here

.card { 
    animation: rotate 2s infinite; 
} 

@keyframes rotate { 
    100% { 
     transform: rotateY(180deg); 
    } 
} 

Просто добавьте префиксы для дополнительной поддержки браузера. Они были опущены здесь для краткости.