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>
Related
<style type="text/css">
* {
box-sizing: border-box;
}
.fancy {
position: relative;
max-width: 400px;
padding: 15px;
text-align: center;
}
.fancy::before, .fancy::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
}
.fancy::before {
top: 0;
background: linear-gradient(to right, #FFFFFF, #168DBF 70%);
animation: fancy-top 2s linear infinite;
}
.fancy::after {
bottom: 0;
background: linear-gradient(to left, #FFFFFF, #168DBF 70%);
animation: fancy-bottom 2s linear infinite;
}
#keyframes fancy-top {
0% { background-position: 0 0; }
100% { background-position: 400px 0; }
}
#keyframes fancy-bottom {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
</style>
<h1 class="fancy">Fancy Heading</h1>
I'm looking for a way to allow this to work independent of the width - I've tried a few different solutions I found from searches on similar things (including background-size, transform, widths, left/right positions), nothing seems to give me the same smooth repeating animation that this does.
Can anyone lend a hand?
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>
hy guys this is a simple css background animation script everything is working fine but now i want to Set this background in 50% of the width of the window i tried a several way but i am not able to do this and now i am totally frustrated ... any kind of suggestion will help in my project thnx in advance.
<style>
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
</style>
<body>
<h1>Pure CSS3 Animated Gradient Background</h1>
</body>
</head>
Added an extra div with css properties
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
to achieve 50% width and 100% height.
body {
width: 100wh;
height: 90vh;
color: #fff;;
}
.width-50 {
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
<body>
<div class="width-50">
<h1>Pure CSS3 Animated Gradient Background</h1>
</div>
</body>
I have a fixed background image within a div that will not display consistently in mobile Safari. It displays fine when a page is refreshed, but the main issue arises when I try to prompt backward and forward to other site pages, which causes the browser to reposition the background's origin point awkwardly.
Note: The first image shows the background image displaying correctly, while the second image displays the transform-origin shift that occurs upon navigating back/forward in the Safari mobile browser, (the main issue).
Here's a snippet, for further reference:
body,
html {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
body {
background: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
z-index: -2;
}
.sitebg {
background: url("http://maxpixel.freegreatpicture.com/static/photo/1x/Seamless-Repeating-Tiling-Tile-able-Tileable-1889447.jpg");
background-repeat: repeat;
background-position: center;
background-size: 720px 720px;
-webkit-animation: 180s rotatebg infinite linear;
-moz-animation: 180s rotatebg infinite linear;
-o-animation: 180s rotatebg infinite linear;
-ms-animation: 180s rotatebg infinite linear;
animation: 180s rotatebg infinite linear;
width: 750px;
height: 750px;
position: fixed;
top: 50%;
left: 50%;
}
.sitebg-parent {
position: absolute;
height: 100%;
width: 100%;
margin: auto;
padding: 0;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#-webkit-keyframes rotatebg {
0% {
-webkit-transform: rotate(0deg) translate(-50%, -50%);
-webkit-transform-origin: top left;
}
100% {
-webkit-transform: rotate(360deg) translate(-50%, -50%);
-webkit-transform-origin: top left;
}
}
#keyframes rotatebg {
0% {
transform: rotate(0deg) translate(-50%, -50%);
transform-origin: top left;
}
100% {
transform: rotate(360deg) translate(-50%, -50%);
transform-origin: top left;
}
}
<body>
<div class="sitebg-parent">
<div class="sitebg"></div>
</div>
</body>
Please try the code below.
I've slightly changed your code and removed unnecessary and ivalid css rules.
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
.sitebg {
position: absolute;
top: 50%; left: 50%;
width: 2000px; height: 2000px;
margin: -1000px 0 0 -1000px;
background: url("http://s3.gomedia.us/wp-content/uploads/2008/06/skullbg-green.gif");
transform-origin: 50% 50%;
-webkit-animation: 180s rotatebg infinite linear;
animation: 180s rotatebg infinite linear;
}
.sitebg-parent {
position: absolute; z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}
#-webkit-keyframes rotatebg {
0% {-webkit-transform: rotateZ(0deg)}
100% {-webkit-transform: rotateZ(360deg)}
}
#keyframes rotatebg {
0% {transform: rotateZ(0deg)}
100% {transform: rotateZ(360deg)}
}
<body>
<div class="sitebg-parent">
<div class="sitebg"></div>
</div>
</body>
I've got an issue where my sprite-sheet animation won't stop on the final frame - I've changed the animation-iteration-count to '1' and also changed the animation-fill-mode to 'forwards', but it doesn't appear to be working.
The animation doesn't revert back to the first frame either, it runs to the end, and then jumps back to the first frame in the last row of the sprite sheet.
So I feel like I'm almost there, but maybe I'm missing something?
I've put together an example here to demonstrate.
.container {
width: 64px;
height: 64px;
position: relative;
}
#-webkit-keyframes spritex {
0% {
background-position-x: 0%;
background-position-y: 0%;
}
20% {
background-position-x: -500%;
background-position-y: 0%;
}
20.01% {
background-position-x: 0%;
background-position-y: -100%;
}
40% {
background-position-x: -500%;
background-position-y: -100%;
}
40.01% {
background-position-x: 0%;
background-position-y: -200%;
}
60% {
background-position-x: -500%;
background-position-y: -200%;
}
60.01% {
background-position-x: 0%;
background-position-y: -300%;
}
80% {
background-position-x: -500%;
background-position-y: -300%;
}
80.01% {
background-position-x: 0%;
background-position-y: -400%;
}
99.99% {
background-position-x: -500%;
background-position-y: -400%;
}
100% {
background-position-x: -500%;
background-position-y: -400%;
}
}
.sprite {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(http://i296.photobucket.com/albums/mm182/CodeH4x0r/explosion17.png);
background-size: 500% 500%;
-webkit-animation: spritex 3s steps(5) 1;
-webkit-animation-fill-mode: forwards;
animation: spritex 3s steps(5) 1;
animation-fill-mode: forwards;
}
}
<div class="container">
<div class="sprite"></div>
</div>
(View in Codepen)
Your positions are not correct.
The correct positions shouldn't get higher than 100%.
This are the correct ones
.container {
width: 64px;
height: 64px;
position: relative;
}
#-webkit-keyframes spritex {
0% {
background-position-x: 0%;
background-position-y: 0%;
}
20% {
background-position-x: 100%;
background-position-y: 0%;
}
20.01% {
background-position-x: 0%;
background-position-y: 25%;
}
40% {
background-position-x: 100%;
background-position-y: 25%;
}
40.01% {
background-position-x: 0%;
background-position-y: 50%;
}
60% {
background-position-x: 100%;
background-position-y: 50%;
}
60.01% {
background-position-x: 0%;
background-position-y: 75%;
}
80% {
background-position-x: 100%;
background-position-y: 75%;
}
80.01% {
background-position-x: 0%;
background-position-y: 100%;
}
100% {
background-position-x: 100%;
background-position-y: 100%;
}
}
.sprite {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(http://i296.photobucket.com/albums/mm182/CodeH4x0r/explosion17.png);
background-size: 500% 500%;
-webkit-animation: spritex 3s steps(4) 1;
-webkit-animation-fill-mode: forwards;
animation: spritex 3s steps(4) 1;
animation-fill-mode: forwards;
}
}
<div class="container">
<div class="sprite"></div>
</div>
There are actually two problems here. First, you have an off-by-one error with the step function. The starting position shouldn't be included in number of steps passed to the step function.
From MDN:
steps(4, end)
The second problem is that you seem to have an incorrect idea of what percentage values in background-position represent. Again, from MDN:
The background-position CSS property sets the initial position,
relative to the background position layer defined by background-origin
for each defined background image.
[...]
Percentages refer to the size of the background positioning area minus
size of background image; size refers to the width for horizontal
offsets and to the height for vertical offsets
In this case, the "size of the background positioning area" is the size of the entire sprite sheet, and the "size of background image" is the size of one image in that sheet. So what that means in this case is that 100% is equal to the width of exactly 4 spaces in the sprite sheet (5 - 1), and therefore 25% is equal to the width of exactly one space in the sprite sheet.
This means that background-position-x: -500%; background-position-y: -400%; isn't where you think it is. That's why the sprite being displayed at the end of the animation is wrong.
So putting all this knowledge together, we end up with this:
.container {
width: 64px;
height: 64px;
position: relative;
}
#-webkit-keyframes spritex {
0% {
background-position-x: 0%;
background-position-y: 0%;
}
20% {
background-position-x: 100%;
background-position-y: 0%;
}
20.01% {
background-position-x: 0%;
background-position-y: 25%;
}
40% {
background-position-x: 100%;
background-position-y: 25%;
}
40.01% {
background-position-x: 0%;
background-position-y: 50%;
}
60% {
background-position-x: 100%;
background-position-y: 50%;
}
60.01% {
background-position-x: 0%;
background-position-y: 75%;
}
80% {
background-position-x: 100%;
background-position-y: 75%;
}
80.01% {
background-position-x: 0%;
background-position-y: 100%;
}
99.99% {
background-position-x: 100%;
background-position-y: 100%;
}
100% {
background-position-x: 100%;
background-position-y: 100%;
}
}
.sprite {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(http://i296.photobucket.com/albums/mm182/CodeH4x0r/explosion17.png);
background-size: 500% 500%;
-webkit-animation: spritex 3s steps(4) 1;
-webkit-animation-fill-mode: forwards;
animation: spritex 3s steps(4) 1;
animation-fill-mode: forwards;
}
<div class="container">
<div class="sprite"></div>
</div>
(View in Codepen)