2015-03-22 3 views
1

У меня есть этот CSS код и наезжает на изображение на парении, что я пытаюсь сделать сейчас, когда элемент выключен левитации для изображения для анимации обратно в исходное положениеCSS anmation от парения

.item: hover img { 
-webkit-animation: animatedBackground 1s ease-out 1; 
     -moz-animation: animatedBackground 1s ease-out 1; 
     animation: animatedBackground 1s ease-out 1; 
     -webkit-animation-fill-mode: forwards; 
     animation-fill-mode: forwards; 
} 

@-webkit-keyframes animatedBackground { 
    0% { 
    -webkit-transform: scale(1, 1); 
    -moz-transform: scale(1, 1); 
    -ms-transform: scale(1, 1); 
    -o-transform: scale(1, 1); 
    transform: scale(1, 1); 
    } 
    100% { 
    -webkit-transform: scale(1.1, 1.1); 
    -moz-transform: scale(1.1, 1.1); 
    -ms-transform: scale(1.1, 1.1); 
    -o-transform: scale(1.1, 1.1); 
    transform: scale(1.1, 1.1); 
    } 
} 
@-moz-keyframes animatedBackground { 
    0% { 
    -webkit-transform: scale(1, 1); 
    -moz-transform: scale(1, 1); 
    -ms-transform: scale(1, 1); 
    -o-transform: scale(1, 1); 
    transform: scale(1, 1); 
    } 
    100% { 
    -webkit-transform: scale(1.1, 1.1); 
    -moz-transform: scale(1.1, 1.1); 
    -ms-transform: scale(1.1, 1.1); 
    -o-transform: scale(1.1, 1.1); 
    transform: scale(1.1, 1.1); 
    } 
} 
@keyframes animatedBackground { 
    0% { 
    -webkit-transform: scale(1, 1); 
    -moz-transform: scale(1, 1); 
    -ms-transform: scale(1, 1); 
    -o-transform: scale(1, 1); 
    transform: scale(1, 1); 
    } 
    100% { 
    -webkit-transform: scale(1.1, 1.1); 
    -moz-transform: scale(1.1, 1.1); 
    -ms-transform: scale(1.1, 1.1); 
    -o-transform: scale(1.1, 1.1); 
    transform: scale(1.1, 1.1); 
    } 
} 

Как бы это осуществить.

ответ

2

Я хотел бы использовать переходы вместо анимации. Это было бы так.

.item { 
    color: orange; 
    transition: 
    color 1s, 
    transform 1s; 
} 

.item:hover { 
    color: darkorange; 
    transform: scale(2); 
} 

More info.

2

Вы могли бы упростить все это и просто использовать простоту в выкатывания и масштабности =)

.item img { 
    transition: 1s ease-in-out; 
} 

.item:hover img { 
    transform: scale(1.1); 
} 
Смежные вопросы