[Homework] Web Fundamentals - Problem {2} - Crazy Shaky Gallery - Софтуерен университет

olebg 2 Точки

[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
}

Тагове:

05/03/2015 16:35:04 Web Fundamentals - HTML5 05/03/2015 17:19:51

Виж всички отговори

NapushenBuhal 17 Точки

И аз доста се мотах с този проблем, в крайна сметка го направих като вкарах всяка картинка в "a" и на "а"-то му приложих :focus. Колко е правилно не знам, но работи...

a:focus {
-webkit-animation: cssAnimation 2s 16 ease;
-moz-animation: cssAnimation 2s 16 ease;
-o-animation: cssAnimation 2s 16 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(360deg) scale(3) skew(1deg) translate(50px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(360deg) scale(3) skew(1deg) translate(50px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(360deg) scale(3) skew(1deg) translate(50px); }
}

Първоначалният ми код е това, пък ако ми се занимава тези дни ще го оправям, че сега съм се отдал на подготовка за изпита :)

05/03/2015 17:25:05

FlipRF 16 Точки

Като кликнеш върху <a> не те ли препраща някъде другаде?

06/03/2015 13:53:08

NapushenBuhal 17 Точки

Ами в слчая ми е <a href="#">, така че си ме препраща в същата страница и няма проблем. Пак казвам, че не знам дали е правилно, но за момента не намирам по-добро решение, ще се радвам някой да сподели, ако знае.

06/03/2015 14:14:46

olebg 2 Точки

И аз чакам за някакви други идеи, защото не можах да намеря решение в Google, може би не търся правилно, не знам. Иначе благодаря горе за идеята, ако не излезне друга до края на срока за домашното ще я ползвам.

06/03/2015 15:29:44

Виж всички отговори