MyBB Community Forums

i was wondering if anyone could help me, make this:

( The pattern ) move like this:

with a css3 animation code.

Hello,

You can try this method.

First of all add this to your code, backgroundAnimation is the name of the element, you can rename it as you wish.

@keyframes backgroundAnimation {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

Then you have to add this parameter to the element you want to animate. If you changed the name of the animation from "backgroundAnimation" to "dog" you have to change it on this parameter.

animation: backgroundAnimation 40s linear infinite;

Now your code will be like this:

@keyframes backgroundAnimation {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

#div-to-animate {
	background: url(your_image.jpg) 0 0 repeat-x;
	animation: backgroundAnimation 40s linear infinite;
}

Hope my reply was usefull,
have fun!

(2014-07-05, 03:21 PM)Lowseling Wrote: [ -> ]Hello,

You can try this method.

First of all add this to your code, backgroundAnimation is the name of the element, you can rename it as you wish.

@keyframes backgroundAnimation {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

Then you have to add this parameter to the element you want to animate. If you changed the name of the animation from "backgroundAnimation" to "dog" you have to change it on this parameter.

animation: backgroundAnimation 40s linear infinite;

Now your code will be like this:

@keyframes backgroundAnimation {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

#div-to-animate {
	background: url(your_image.jpg) 0 0 repeat-x;
	animation: backgroundAnimation 40s linear infinite;
}

Hope my reply was usefull,
have fun!

I don't quite understand how this works?, is it all css or some html?

(2014-07-05, 03:50 PM)Billie Joe Armstrong Wrote: [ -> ]

(2014-07-05, 03:21 PM)Lowseling Wrote: [ -> ]Hello,

You can try this method.

First of all add this to your code, backgroundAnimation is the name of the element, you can rename it as you wish.

@keyframes backgroundAnimation {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

Then you have to add this parameter to the element you want to animate. If you changed the name of the animation from "backgroundAnimation" to "dog" you have to change it on this parameter.

animation: backgroundAnimation 40s linear infinite;

Now your code will be like this:

@keyframes backgroundAnimation {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

#div-to-animate {
	background: url(your_image.jpg) 0 0 repeat-x;
	animation: backgroundAnimation 40s linear infinite;
}

Hope my reply was usefull,
have fun!

I don't quite understand how this works?, is it all css or some html?

This is a CSS3 animation. This create an infinite loop that create a scrolling background!

Yes but I'm not entirely sure on how i would add it?

(2014-07-05, 04:18 PM)Billie Joe Armstrong Wrote: [ -> ]Yes but I'm not entirely sure on how i would add it?

Can you give me the CSS of the div where is the background you want to animate?

sure,

.figuras {
    background: url(images/OnPiece/bann2er.png) repeat-x scroll left transparent;
    border-bottom: 1px solid #D6D5D5;
    height: 88px;
    position: relative;
    margin-top: -11px;
    -webkit-animation: bgscroll 120s infinite linear;
    -moz-animation: bgscroll 120s infinite linear;
    -ms-animation: bgscroll 120s infinite linear;
    -o-animation: bgscroll 120s infinite linear;
    animation: bgscroll 120s infinite linear;
}

Replace it with:

@keyframes bgscroll {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
} 

.figuras {
    background: url(images/OnPiece/bann2er.png) transparent;
    background-position: 0 0;
    background-repeat: repeat-x;
    border-bottom: 1px solid #D6D5D5;
    height: 88px;
    position: relative;
    margin-top: -11px;
    animation: bgscroll 40s infinite linear;
}

It should work, if not I'll try other solutions

(2014-07-05, 06:39 PM)Lowseling Wrote: [ -> ]Replace it with:

@keyframes bgscroll {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
} 

.figuras {
    background: url(images/OnPiece/bann2er.png) transparent;
    background-position: 0 0;
    background-repeat: repeat-x;
    border-bottom: 1px solid #D6D5D5;
    height: 88px;
    position: relative;
    margin-top: -11px;
    animation: bgscroll 40s infinite linear;
}

It should work, if not I'll try other solutions

I't didn't seem to work, i do appreciate you helping though.

(2014-07-05, 07:11 PM)Billie Joe Armstrong Wrote: [ -> ]

(2014-07-05, 06:39 PM)Lowseling Wrote: [ -> ]Replace it with:

@keyframes bgscroll {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
} 

.figuras {
    background: url(images/OnPiece/bann2er.png) transparent;
    background-position: 0 0;
    background-repeat: repeat-x;
    border-bottom: 1px solid #D6D5D5;
    height: 88px;
    position: relative;
    margin-top: -11px;
    animation: bgscroll 40s infinite linear;
}

It should work, if not I'll try other solutions

I't didn't seem to work, i do appreciate you helping though.

@keyframes bgscroll {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

@-webkit-keyframes bgscroll {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

.figuras {
    background: url(images/OnPiece/bann2er.png);
    background-position: 0 0;
    background-repeat: repeat-x;
    border-bottom: 1px solid #D6D5D5;
    height: 88px;
    position: relative;
    margin-top: -11px;
    animation: bgscroll 40s infinite linear;
    -webkit-animation: bgscroll 40s infinite linear;
}

This should work, I fixed it for Chrome, Opera and Safari. The first code works only on Mozilla Firefox