I want to use the progress bar of bootstrap as fancy looking barricade tape. That works quite nice, I also want want I to make the bar thicker. So I changed the background-size of the active progress-bar from 40px to 60:
div.progress.active .progress-bar {
background-size: 60px 60px;
}
That worked so far that the bar is now thicker but the animation does not loop correctly anymore.
What do I have to change so the loop occurs after 60 instead of 40 pixel?
see for yourself: http://jsfiddle.net/ok94vqoa/1/
You would need to update the keyframes for the progress-bar-stripes animation to 60px as well.
jsFiddle
#-webkit-keyframes progress-bar-stripes {
from {
background-position: 60px 0;
}
to {
background-position: 0 0;
}
}
#-o-keyframes progress-bar-stripes {
from {
background-position: 60px 0;
}
to {
background-position: 0 0;
}
}
#keyframes progress-bar-stripes {
from {
background-position: 60px 0;
}
to {
background-position: 0 0;
}
}
Related
I'm tryin to make a infinte animation but at some point it seems to hop back to the start.
Thats the code
h1 {
background: url(Pepesad.png) repeat-x;
width: 90%;
margin: 1em auto;
max-width: 600px;
height: 512px;
animation: flybirds 1s linear infinite;
}
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: 300px 0px
}
}
Some of the CSS rules you mentioned for h1 seems unnecessary for your purpose. Mentioning the width gives the animation very less space. Consider providing the h1 a container/ wrapper and set appropriate width for it.
h1 {
background: url(Pepesad.png) repeat-x;
height: 512px;
width: 5076px;
animation: flybirds 1s linear infinite;
}
Also in the keyframes you have mentioned the x-axis to 300px which cause the breaking effect during the animation. I suggest you update it
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: -100% 0px
}
}
Another alternative you could use is :
#keyframes flybirds {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1692px, 0, 0);
}
}
Note: the reason why I suggest to use an additional at all, rather than animating background-position on h1, is so that we can use an animated transform to do the movement, which is much more performant.
I'm very new to animations in CSS, very new indeed. What I'm trying to accomplish is relatively simple conceptually. I want to animate my target element, in which case my background image, back into it's original position.
For example,
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
Would move the background image to it's width, but I'm wondering if it would be possible to animate it back to 0. Otherwise, after reaching it's width, the animation will cut and the background will transition back to 0 instantly, making it seem very choppy.
You might be aware, but defining the animation is a lot like creating a function. You still have to invoke it somewhere.
HTML
<html>
<head>
<title>Hello, Lamb!</title>
<body>
<h1>Hello, Lamb!</h1<
</body>
</html>
CSS
body {
background-image: url('http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg');
background-repeat: none;
animation: animatedBackground 5s infinite;
}
#keyframes animatedBackground {
0%{
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
http://codepen.io/BigDaddyTeemoe/pen/qdQdMw
Something like this I think:
#keyframes animatedBackground {
0%{
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
I have a 11 frame png spritesheet. When you hover it will play the animation until the last frame and then pause, and when you hover out it will reverse the animation back to the first frame. I have this so far:
.intern {
width: 328px;
height: 187px;
background-image: url("http://i.imgur.com/zNsJCnM.png");
-webkit-animation: in 0.5s steps(11);
}
.intern:hover {
-webkit-animation: out 0.5s steps(11);
}
#-webkit-keyframes in {
from {
background-position: 0px 0px;
}
to {
background-position: 0px -2057px;
}
}
#-webkit-keyframes out {
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px -2057px;
}
}
<div class="intern"></div>
JS Fiddle: http://jsfiddle.net/os2jm4h5/
Can someone help me out? I would like to do this with CSS (no JavaScript please) and preferably should use only one div.
This is possible with a few changes to CSS:
Add background-position: 0px -1683px; to .intern:hover. This will ensure that the animation "pauses" on the final frame. Currently when the hover animation finishes background-position goes back to 0px 0px;.
Reverse background-position in from and to for #-webkit-keyframes in
Reverse background-position in 0% and 100% for#-webkit-keyframes out
.intern {
width: 328px;
height: 187px;
background-image: url("http://i.imgur.com/zNsJCnM.png");
-webkit-animation: in 0.5s steps(11);
}
.intern:hover {
-webkit-animation: out 0.5s steps(11);
background-position: 0px -1683px;
}
#-webkit-keyframes in {
from {
background-position: 0px -2057px;
}
to {
background-position: 0px 0px;
}
}
#-webkit-keyframes out {
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px -2057px;
}
}
<div class="intern"></div>
Note that background-position: 0px -1683px; is used because the last image in the sprite sheet (background-position: 0px -2057px;) is actually a copy of the first frame.
I'm making a CSS3-animation of a desk with a blinking lamp using a spritesheet with only two different sprites. The problem is, that the animation when using percent instead from "from" and "to" causes the entire image to blink, even though the animation runs as it should.
It works fine when I use this:
background: url("../img/desk.svg");
background-size: auto 200%;
background-repeat: no-repeat;
background-position: 0 0;
-webkit-animation: desk 5s steps(2) infinite;
#-webkit-keyframes {
from {
background-position: 0 0;
}
to {
background-position: 0 200%;
}
}
But when using this, the image blinks. The animaton itself works as it should though:
#-webkit-keyframes desk {
0% {
background-position: 0 0%;
}
10% {
background-position: 0 200%;
}
15% {
background-position: 0 0%;
}
20% {
background-position: 0 200%;
}
25% {
background-position: 0 0%;
}
100% {
background-position: 0 200%;
}
}
I am clueless to why this happens, as I'm using a spritesheet, and the image wont have to load every time.
Hope someone can help me out :)
try:
background: url("../img/desk.svg");
background-size: auto 200%;
background-repeat: no-repeat;
background-position: 0 0;
-webkit-animation: desk 5s steps(2) infinite;
#-webkit-keyframes desk{
from {
background-position: 0 0;
}
to {
background-position: 0 200%;
}
}
I have the following fiddle (Wekbit/Chrome only).
Just watch the animation for a while and you will see it "stop" for a millisecond and then continues again. Could it be the svg file itself? If that is the case, how can I fix this file so the hiccup is gone?
HTML
<div class="tile10"></div>
CSS
#-webkit-keyframes move {
0% {
background-position: 6px 0;
}
100% {
background-position: 6px 80px;
}
}
.tile10 {
width: 80px;
height: 80px;
position: absolute;
background: url(http://www.mauricederegt.nl/loopband.svg);
background-repeat: repeat-y;
-webkit-animation: move 3s linear infinite;
z-index: -1;
}
It was indeed in the image. Your rows are about 6px heigh. 80 is not dividable by 6, so there will be a little displacement. 78 however is dividable by 6.
http://jsfiddle.net/rtS5U/5/
So instead of moving it 80px down, move it 78px down.
#-webkit-keyframes move {
0% {
background-position: 6px 0;
}
100% {
background-position: 6px 78px;
}
}