помогите сделать такое чудо (css3) - Форум
Страница 1 из 11
Форум » Форум веб мастеров » html & css » помогите сделать такое чудо (css3) (анимация фона)
помогите сделать такое чудо (css3)

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

Goodmind
VIP
Сообщений 466
+
+1715
-
Ваши награды 13
Goodmind написал: В ответ пользователя Goodmind Написано 21 Апреля 2013 в 10:22
Сообщение № 2
S@Nek, keyframes
подпись: Goodmind спешит на помощь! Goodmind

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

Goodmind
VIP
Сообщений 466
+
+1715
-
Ваши награды 13
Goodmind написал: В ответ пользователя Goodmind Написано 21 Апреля 2013 в 10:53
Сообщение № 4
Код

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
S@Nek написал: В ответ пользователя S@Nek Написано 21 Апреля 2013 в 12:22
Сообщение № 5
Goodmind, благодарю)
для чего нужна эта строка и почему она пустая?
Код
-webkit-animation-iteration-count:
подпись: S@Nek

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

Goodmind
VIP
Сообщений 466
+
+1715
-
Ваши награды 13
Goodmind написал: отредактировал: Goodmind - Воскресенье, 21.04.2013, 12:59 В ответ пользователя Goodmind Написано 21 Апреля 2013 в 12:50
Сообщение № 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
Форум » Форум веб мастеров » html & css » помогите сделать такое чудо (css3) (анимация фона)
Страница 1 из 11
Поиск:
Топ пользователей: