• Страница 1 из 1
  • 1
помогите сделать такое чудо (css3)

S@Nek
VIP
Сообщений 678
+
+1349
-
Ваши награды 18
Как сделать, чтобы при наведении на квадратик с заданным фоном, у него фон медленно перемещался
подпись: S@Nek
«Пред. тема След. тема»

Goodmind
VIP
Сообщений 466
+
+1735
-
Ваши награды 13
S@Nek, keyframes
подпись: Goodmind спешит на помощь! Goodmind

S@Nek
VIP
Сообщений 678
+
+1349
-
Ваши награды 18
Goodmind, я знаю это, дак в том то и дело, делаю как указывают источники, но не получается( сделайте пример рабочий.
У меня есть кубик с фоном (50px на 50px), нужно чтобы при наведении на него фон, который в нем заключен двигался в низ(плавно) при убирании курсора обратно возвращался на исходную позицию.
подпись: S@Nek

Goodmind
VIP
Сообщений 466
+
+1735
-
Ваши награды 13
Код

div {background:url('');}
div:hover {
-webkit-animation-name: 'animation';
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count:
}
@-webkit-keyframes 'animation' {
  from {background-position:0 0;-webkit-animation-timing-function:linear;}
  to {background-position:0 -25px;-webkit-animation-timing-function:linear;}  
}
подпись: Goodmind спешит на помощь! Goodmind

S@Nek
VIP
Сообщений 678
+
+1349
-
Ваши награды 18
Goodmind, благодарю)
для чего нужна эта строка и почему она пустая?
Код
-webkit-animation-iteration-count:
подпись: S@Nek

S@Nek
VIP
Сообщений 678
+
+1349
-
Ваши награды 18
Goodmind, и ещё как сделать, чтобы анимация как прошла эти 25 пикселей не возвращалась обратно на первоначальный кадр а остановилась на месте пока курсор не уберешь.
подпись: S@Nek

Goodmind
VIP
Сообщений 466
+
+1735
-
Ваши награды 13
Goodmind написал: отредактировал: Goodmind - Воскресенье, 21.04.2013, 12:59 В ответ пользователя Goodmind Написано 21 Апреля 2013 в 12:50
7<\' onclick=\'this.select();\' style=\'width:95%;text-align: center; height:20px; margin-top:15px;\'/>');" style="text-align:right; margin-left:19px;">Сообщение № 7
Цитата (S@Nek)
для чего нужна эта строка и почему она пустая?

это сколько раз повторять анимацию

Код

div {background:url('http://webo4ka.ru/avatar/16/387003.png');height:150px;width:150px;}  
div:hover {  
-webkit-animation-name: 'animation';  
-webkit-animation-duration: 3s;  
-webkit-animation-iteration-count:  
}  
@-webkit-keyframes 'animation' {  
   from {background-position:0 0px;-webkit-animation-timing-function:linear;}  
   50% {background-position:0 -25px;-webkit-animation-timing-function:linear;}
   to {background-position:0 -25px;-webkit-animation-timing-function:linear;}   
}  
подпись: Goodmind спешит на помощь! Goodmind
  • Страница 1 из 1
  • 1
Поиск:
Топ пользователей: