Loading...
olebg avatar 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
}
Тагове:
0
Web Fundamentals - HTML5 05/03/2015 17:19:51
NapushenBuhal avatar 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); }
}

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

1
FlipRF avatar FlipRF 16 Точки

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

0
NapushenBuhal avatar NapushenBuhal 17 Точки

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

0
olebg avatar olebg 2 Точки

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

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.