css Удерживать анимацию после ее завершения

Question

Например, я делаю масштаб от 1 до 2, и я хочу, чтобы он удерживался, когда он попадает в шкалу 2, например, когда пользователь наводит некоторое изображение, которое масштабируется, возможно ли это?

@-webkit-keyframes scale { 
    from { 
     transform: scale(1); 
     -ms-transform: scale(1); /* IE 9 */ 
     -webkit-transform: scale(1); /* Safari and Chrome */ 
    } 
    to { 
     transform: scale(1.5); 
     -ms-transform: scale(1.5); /* IE 9 */ 
     -webkit-transform: scale(1.5); /* Safari and Chrome */ 
    } 
} 
@keyframes scale { 
    from { 
     transform: scale(1); 
     -ms-transform: scale(1); /* IE 9 */ 
     -webkit-transform: scale(1); /* Safari and Chrome */ 
    } 
    to { 
     transform: scale(1.5); 
     -ms-transform: scale(1.5); /* IE 9 */ 
     -webkit-transform: scale(1.5); /* Safari and Chrome */ 
    } 
} 

div.item:hover 
{ 
animation: scale 2s; 
-webkit-animation: scale 2s; 
} 

Answer 1

Используйте это.Я думаю, что это сработает. Я даю только версию webkit (Crome), которую вам нужно написать для всех.

@-webkit-keyframes scale{ 
    0% { 
     transform: scale(1); 
     -ms-transform: scale(1); /* IE 9 */ 
     -webkit-transform: scale(1); /* Safari and Chrome */ 
    } 
    100% { 
     transform: scale(1.5); 
     -ms-transform: scale(1.5); /* IE 9 */ 
     -webkit-transform: scale(1.5); /* Safari and Chrome */ 
    } 
    } 

div.item:hover 
{ 
    -webkit-animation: scale 2s; 
} 

Answer 2

Вы можете использовать свойство перехода вместо анимации ключевых кадров.

div.item { 
    transform: scale(1); 
    transition: all .2s; 
} 

div.item:hover { 
    transform: scale(1.5); 
} 

Смотрите эту скрипку для примера: http://jsfiddle.net/8eHHL/

Answer 3

Я боюсь, что это невозможно сохранить результат анимации в вашем случае. Вы привязываете анимацию при наведении и пытаетесь сохранить ее, когда пользователь размывает мышь от вашего элемента. Но есть способность держать анимат на клике. click event is done with :target

Answer 4

использование animation-fill-mode: forwards или both

div.item:hover 
{ 
animation: scale 2s forwards; 
-webkit-animation: scale 2s forwards; 
} 

Answer 5

Используйте это:

.div.item { animation: bubble 1.0s forwards; 
    -webkit-animation: bubble 1.0s forwards; /* for other modern browsers */ 
}