How do I slow down this animation and make it smoother for all browsers? Is there any possible way?
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#animate-area {
width: 200px;
height: 200px;
background-image: url(https://github.githubassets.com/images/modules/open_graph/github-mark.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 10s linear infinite alternate;
}
<div id="animate-area"></div>
Simply give the animation a longer duration.
The following changes it from 10s to 30s:
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#animate-area {
width: 200px;
height: 200px;
background-image: url(https://github.githubassets.com/images/modules/open_graph/github-mark.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 30s linear infinite alternate;
}
<div id="animate-area"></div>
Related
I have created a div with a background image. Using keyframe animation I want it to move vertically up continuously, which it does however at the end of the frame it jumps then continues. I am new with keyframes. I can not use JS.
I have tried looking at the questions on here but they are mainly focused on sliders.
This is my code so far:
<style>
#animate-area {
background-image: url(/image.png);
width: 100%;
height: 500px;
background-position: 0px 0px;
background-repeat: repeat-x;
-webkit-animation: animatedBackground 5s ease-in-out infinite;
-moz-animation: animatedBackground 5s ease-in-out infinite;
animation: animatedBackground 5s ease-in-out infinite;
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
</style>
<div id="animate-area"></div>
As soon as the frame has finished it jumps and then continues. Is it possible to for it to continuously loop without jumping with a background image? If so, how?
Live example to continuously move up :
#animate-area {
background-image: url('https://pt.freelogodesign.org/Content/img/logo-ex-2.png');
width: 100%;
height: 500px;
background-position: 0;
animation: slideup 5s linear 1s infinite;
position:absolute;
}
#keyframes slideup {
0% { background-position: 0 0; }
50% { background-position: 0 -500px; }
100% { background-position: 0 -900px; }
}
<div id="animate-area"></div>
you can use twice the same image with opposite coordonates to move from/to :
#animate-area {
background-image: url(http://dummyimage.com/100&text=img_1), url(http://dummyimage.com/100&text=img_2);
width: 100%;
height: 500px;
background-position: 0px 0px, 0 -100%;
background-repeat: repeat-x;
animation: animatedBackground 5s ease-in-out infinite;
}
#keyframes animatedBackground {
from {
background-position: 0 0, 0 -100%;
}
to {
background-position: 0 100%, 0 0;
}
}
<div id="animate-area"></div>
different text is used to show what happens
I try to animate a sprite with auto fullscreen size
but I don't know how can I do to read this sprite always in fullscreen (i.e. 100% of width and height of screen, and auto adapte if resizing)
any idea to autosize sprite ?
#-moz-keyframes play {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
#-webkit-keyframes play {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
#keyframes play {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
#loader
{
position: fixed;
z-index: 999999999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 0 0;
background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
background-size: 1100% 100%;
background-repeat: no-repeat;
-webkit-animation: play 2s infinite steps(11);
-moz-animation: play 2s infinite steps(11);
-o-animation: play 2s infinite steps(11);
animation: play 2s infinite steps(11);
}
<div id="loader"></div>
You're almost there!
There should be steps(10) as the start position is not a step actually.
BTW, z-index: 999999999999 looks paranoid to me =)).
#keyframes play {
100% {
background-position: 100%;
}
}
#loader
{
position: absolute;
z-index: 9;
top: 0; right:0;
bottom:0; left: 0;
background-position: 0 0;
background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
background-size: 1100% 100%;
background-repeat: no-repeat;
animation: play 1s infinite steps(10);
}
<div id="loader"></div>
Update
Question bonus:
#keyframes play {
99.99% {
background-position: 120%;
background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
}
100% {
background-image: none;
z-index: -1;
}
}
#loader {
position: fixed;
z-index: 9;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: 0 0;
background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
background-size: 1100% 100%;
background-repeat: no-repeat;
animation: play 2s steps(12) forwards;
}
body {
background: url(https://picsum.photos/640/480) 50% 50% /cover
<div id="loader"></div>
Hello i have some issues with my code because animation won't work here's my code:
background-image:url(industry2.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border:1px solid red;
-webkit-animation: fadein 2s ease-in ;
-moz-animation: fadein 2s ease-in ;
animation: fadein 2s ease-in ;
width:500px;
height:200px;
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
position:absolute;
top:2700px;
left:1300px;
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
you see i don't get animation working and i don't know what to do...
You had not closed the #keyframes. I have removed the left and top position for visibility purpose.
.container {
background-image: url("http://via.placeholder.com/500x200");
background-size: cover;
border: 1px solid red;
animation: fadein 2s ease-in;
width: 500px;
height: 200px;
background-repeat: no-repeat;
background-position: left top;
padding-top: 68px;
position: absolute;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="container">Hello</div>
i want to use this code , but i want animation goes vertical.
header {
width: 100%;
height: 150px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image
background-position: 0px;
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
i found this code here : http://jsfiddle.net/e3WLD/3/
thanks for help
The background-position accepts 2 parameters :
the first one for horizontal positioning
and the second one for vertical positioning
More info on background-position on W3schools
So by adding a second parameter to the background-position property you can
animate your background vertically.
I edited your JSFiddle
To this:
header {
width: 100%;
height: 131px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png);
background-position: 0px 0px;
background-repeat: repeat-y;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
#-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
#-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 1000px; } /* set this to the width of the image */
}
#keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
I am able to do vertical by transforming the element 90 degrees.
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
Working Fiddle
You are only setting and animating one of the background position values so it assumes that are referreing to the first one (x-position) and the other defaults to auto (I think).
Try this
**JSFiddle Demo**
CSS
header {
width: 100%;
height: 131px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png);
background-position: 0px 0px; /* note */
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 1000px; }
}
#-moz-keyframes myanim
{ 0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
#-o-keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
#keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
If you want to set it to vertically rotate like this: http://jsfiddle.net/jme11/AYKC2/
Then you need to set the repeat to repeat-y and change the background position to match the element's height:
#keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 131px; } /* set this to the height of the image */
}
i have a question about css steps animation, so i have 12 images, and i want to slide this images like animated gif. But i couldn't achieve that.
My Demo : http://cssdeck.com/labs/full/9hwv565g
what i want to : http://cssdeck.com/labs/css-image-sprite-animations-with-steps-function
body {
text-align: center;
}
#-webkit-keyframes wink {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-moz-keyframes wink {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes wink {
from { background-position: 0px; }
to { background-position: -500px; }
}
.hi {
width: 120px;
height: 120px;
background-image: url("http://i44.tinypic.com/nq7mrp.png");
margin: 0 auto;
-webkit-animation: wink .8s steps(10, end) infinite;
-moz-animation: wink .8s steps(10, end) infinite;
animation: wink .8s steps(10, end) infinite;
}
Can you help me?
Thanks in advance
You need to adjust the background-position value and the steps argument, in you case your image measures 1595px in width and has 12 frames:
body {
text-align: center;
}
#-webkit-keyframes wink {
from { background-position: 0px; }
to { background-position: -1595px; }
}
#-moz-keyframes wink {
from { background-position: 0px; }
to { background-position: -1595px; }
}
#keyframes wink {
from { background-position: 0px; }
to { background-position: -1595px; }
}
.hi {
width: 133px;
height: 126px;
background-image: url("http://i44.tinypic.com/nq7mrp.png");
margin: 0 auto;
-webkit-animation: wink .8s steps(12, end) infinite;
-moz-animation: wink .8s steps(12, end) infinite;
animation: wink .8s steps(12, end) infinite;
}
Demo here