Forum PHP.pl

Witajcie,
mam diva #hero, w nim diva .bg-neutron - on ma background-image sobie jakis - jak zrobic zeby obraz pulsowal?

[XML] pobierz, plaintext 
<style>
@-webkit-keyframes pulse
{
	0% {webkit-transform: scale(1);}
	50% {-webkit-transform: scale(1.1);}
	100% {-webkit-transform: scale(1);}
}
#hero
{
	animation: pulse 3s infinite;
	animation-direction: alternate;
	-webkit-animation-name: pulse;
	animation-name: pulse;
}
[XML] pobierz, plaintext 

tak mi pulsuje całe hero, jak dam "#hero .bg-neutron" nie dziala, jak dam sama klase ".bg-neutron" nie dziala - jak dam ".bg-neutron background-image" tez nie dziala...

Ten post edytował shpaque 20.12.2017, 16:36:05

Powyrzucaj prefiksy (swoją drogą to -webkit, a nie webkit).
Elementy inline nie są animowane, zmień na blokowy lub nadaj mu taki styl (block lub inline-block).

ok to teraz jest tak:

[HTML] pobierz, plaintext 
.bg-neutron
{
	display: block;
}
 
@-webkit-keyframes pulse
{
	0% {transform: scale(1);}
	50% {transform: scale(1.1);}
	100% {transform: scale(1);}
}
.bg-neutron
{
	animation: pulse 3s infinite;
	animation-direction: alternate;
	animation-name: pulse;
}
[HTML] pobierz, plaintext 

tylko teraz co mam animowac? hero, klase czy bg w klasie? i czemu mam nadac blokowy diplay

Wklej tu: https://jsfiddle.net/ kawałek HTML z #hero i .bg-neutron.

dziwne bo tak na szybko napisalem i dziala
https://jsfiddle.net/zezdLuek/

zaraz wkleje z kodu

https://jsfiddle.net/0n1t0dch/1/

ale cos takiego?

[HTML] pobierz, plaintext 
@-webkit-keyframes pulse
{
	0% {transition: background-size(100%);}
	50% {transition: background-size(110%);}
	100% {transition: background-size(100%);}
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
@-webkit-keyframes pulse
{
	0% {background-size: 100% 100%;}
	50% {background-size: 110% 110%;}
	100% {background-size: 100% 100%;}
}
[HTML] pobierz, plaintext 

oj walnalem sie - super (IMG:style_emoticons/default/smile.gif)