Как отменить анимацию вращения CSS?

У меня есть эта анимация CSS, которую я пытаюсь изменить анимацию на основе класса, добавляемого в узел DOM. Я пробовал несколько вещей, но безрезультатно. Вот код, я использую, смотрите ниже:Как отменить анимацию вращения CSS?

EXAMPLE

// Closed state 
    @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } } 
    @-webkit-keyframes spin-close { 100% { -webkit-transform: rotate(-0deg); } } 
    @keyframes spin-close { 100% { transform:rotate(-0deg); } } 

    // Open state 
    @-moz-keyframes spin-open { 100% { -moz-transform: rotate(-90deg); } } 
    @-webkit-keyframes spin-open { 100% { -webkit-transform: rotate(-90deg); } } 
    @keyframes spin-open { 100% { transform:rotate(-90deg); } }

Я не знаю, правильно ли я смотреть на это все не так? Просьба сообщить (демонстрация была бы потрясающей).

источник

2014-01-31 Nasir

Да, демо было бы удивительным. Можем ли мы его увидеть? – SaturnsEye

Опубликуйте еще один код, в котором вы применили этот CSS, чтобы мы могли применить его. –

@Adsy ... см. Здесь для демонстрации: http://jsfiddle.net/Ugc5g/890/ – Nasir

Не беспокойтесь о javascript или анимации. Используйте переход CSS для этого:

.image { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 120px; 
    height: 120px; 
    margin:-60px 0 0 -60px; 
    transition:all 1s ease-out; 
    transform:rotate(0deg); 
    -webkit-transform:rotate(0deg); /* Safari and Chrome */ 
} 

.image:hover { 
    transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); /* Safari and Chrome */ 
}

http://jsfiddle.net/Ugc5g/892/

источник

2014-01-31 16:15:33

Если вы мерцаете на своем iPhone с помощью анимации CSS, используйте: -webkit-backface-visibility: hidden; – Nasir

Как отменить анимацию вращения CSS?

ответ

Смежные вопросы