[Homework] Web Fundamentals - Problem {2} - Crazy Shaky Gallery
Здравейте. Почти съм готов с въпросната задача, но не мога да се оправя с анимациите и по-точно коя кога да тръгва. Докарал съм го до момента в който картинките се шейкват при mouse:hover, но успях да подкарам въртеливата анимация само когато задържа с мишката върху някоя от картинките, само 1 път ако цъкна тръгва и спира анимацията. Това е scss-a за анимациите
Snippet@mixin div-active{ -webkit-animation: cssAnimation 3s 1 ease; -moz-animation: cssAnimation 3s 1 ease; -o-animation: cssAnimation 3s 1 ease; animation: cssAnimation 3s 1 ease; } @-webkit-keyframes cssAnimation { 20%{ -webkit-transform: scale(2) rotate(360deg) skew(0deg) translate(0px); } 100%{ -webkit-transform: rotate(4deg) scale(1) skew(0deg) translate(10px); -webkit-transform: rotate(360deg) scale(1) skew(0deg) translate(0px); } } @-webkit-keyframes spaceboots { 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } } .shake:hover { -webkit-animation-name: spaceboots; -webkit-animation-duration: 0.8s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } .shake { display:inline-block }
Като кликнеш върху <a> не те ли препраща някъде другаде?
Ами в слчая ми е <a href="#">, така че си ме препраща в същата страница и няма проблем. Пак казвам, че не знам дали е правилно, но за момента не намирам по-добро решение, ще се радвам някой да сподели, ако знае.
И аз чакам за някакви други идеи, защото не можах да намеря решение в Google, може би не търся правилно, не знам. Иначе благодаря горе за идеята, ако не излезне друга до края на срока за домашното ще я ползвам.