I've been trying to understand the CSS animation property, I've got this sprite gridsheet I need to run through, I've seen examples of Animations both in row and grid style, but when I try to apply and adapt to my sprite sheet I'm having issues with the display.
Here is my current CSS & Html:
.logo {
width: 120px;
height: 100px;
margin: 2% auto;
background: url('http://res.cloudinary.com/df0nhzq7v/image/upload/v1484325835/bvd2_1024_fxwhvl.png') left top;
-webkit-animation: playv .6s steps(6) infinite, playh 1s steps(6) infinite;
}
#-webkit-keyframes playv {
0% { background-position-y: 0px; }
100% { background-position-y: 100%; }
}
#-webkit-keyframes playh {
0% { background-position-x: 0px; }
100% { background-position-x: 100%; }
}
<div class="logo"></div>
Codepen: http://codepen.io/BenSagiStuff/pen/ZLOJKM
There's a couple issues at play here. The first is that your animation property has the incorrect values. You need to change it from:
animation:
playv .6s steps(6) infinite,
playh 1s steps(6) infinite;
to:
animation:
playv 5s steps(5) infinite,
playh 1s steps(7) infinite;
It's important that the steps function takes in the correct parameters, such that playv is contains the number of sprites there are in the y direction and playh contains the number of sprites there are in the x direction. The timing for playv also needs to be slow enough to animate the grid properly and is actually equivalent to being your duration multiplied by the amount of rows in the sprite grid. This can be simplified into the following formula:
animation:
playv (duration * rows) steps(rows) infinite,
playh duration steps(cols) infinite;
Secondly, the image you have provided as the sprite grid is too large. It contains blank space/padding to the right and bottom of the image. As a result of this, the following lines are calculated incorrectly:
#-webkit-keyframes playv {
0% { background-position-y: 0px; }
100% { background-position-y: 100%; }
}
#-webkit-keyframes playh {
0% { background-position-x: 0px; }
100% { background-position-x: 100%; }
}
You either need to update the sprite grid so that it matches perfectly, or specify the pixels exactly like so:
#-webkit-keyframes playv {
0% { background-position-y: 0; }
100% { background-position-y: -550px; }
}
#-webkit-keyframes playh {
0% { background-position-x: 0; }
100% { background-position-x: -903px; }
}
Here's the working codepen.
Related
I have a list that I'm trying to scroll from top to bottom (marquee fashion). I'm using this CSS:
// Marquee CSS
.scrolling
{
height: 200px;
overflow: hidden;
position: relative;
}
.scrolling a
{
position: absolute;
width: 100%;
height: 100%;
margin: 0;
text-align: center;
color: white;
/* Starting position */
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
/* Apply animation to this element */
-moz-animation: scrolling 15s linear infinite;
-webkit-animation: scrolling 15s linear infinite;
animation: scrolling 15s linear infinite;
}
.scrolling ul {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
text-align: center;
/* Starting position */
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
/* Apply animation to this element */
-moz-animation: scrolling 15s linear infinite;
-webkit-animation: scrolling 15s linear infinite;
animation: scrolling 15s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scrolling {
0% { -moz-transform: translateY(0%); }
100% { -moz-transform: translateY(100%); }
}
#-webkit-keyframes scrolling {
0% { -webkit-transform: translateY(0%); }
100% { -webkit-transform: translateY(100%); }
}
#keyframes scrolling {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
which works, sort of. It does scroll my list, however it hides a large portion of the list. The box size is just what I'm looking for, my list is entirely intact however it simply doesn't show the entire list when I try to scroll it. What am I doing wrong?
The solution, it seems, is to increase the size of the transform ie from -100% (or 0%) to -600% to 600% - it allows for the list to be 12X the size of my box, I think. If someone could confirm this is what I've done by changing those numbers I would certainly be grateful!
I'm creating a loading spinner and having issues with the animation.
The sprite sheet runs through 22 steps. I'd like to use an easing effect at the start and end of the animation. When I add easing, the animation goes static.
jsfiddle: https://jsfiddle.net/Flignats/aaaaaf6h/3/
.hi {
width: 68px;
height: 68px;
background-image: url("data:image/png;base64, ... ");
-webkit-animation: play 1s steps(23) infinite;
-moz-animation: play 1s steps(23) infinite;
-ms-animation: play 1s steps(23) infinite;
-o-animation: play 1s steps(23) infinite;
animation: play 1s steps(23) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -1564px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -1564px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -1564px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -1564px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -1564px; }
}
The steps is one of the timing(easing) functions available (and you cannot use multiple easing functions).
Read the docs about The steps() class of timing-functions
The steps() functional notation defines a step function dividing the domain of output values in equidistant steps.
The following image is to be used in a keyframes animation by moving the background-image position 100% to the right on each frame:
The idea is that the ArrowsAnim.png has 7 frames of the same image (the set of 3 chevrons pointing to the right) in different animation states. The animation arrowAnimation (CSS below) simply skips through background-position 0% to 300% to show the first three frames of this image over 0.5 seconds, repeatedly.
What's happening is that when I resize the browser window, I can sometimes see some pixels of the next or previous frame of the animation, instead of having the background perfectly centered around whichever should be the current block, as you can see in the next picture:
So for some reason, background-position is not being calculated correctly.
I also cannot reproduce this issue on Chromium, but I can do so on Chrome, Firefox and Edge.
CSS:
#autoplay-arrow {
display: inline-block;
position: absolute;
width: 5.91549%;
top: 22.05882%;
height: 50.74627%;
margin-left: 18.30986%;
background-size: 100% 100%;
background-position: 0 0;
background-image: url(../graphics/Arrows_002.png);
}
#-moz-keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#-webkit-keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#keyframes arrowAnimation {
from {
background-position: 300% 0%;
}
to {
background-position: 0% 0%;
}
}
#autoplay-arrow.anim {
background-image: url(../graphics/ArrowsAnim.png);
background-size: 700% 100%;
-moz-animation: arrowAnimation 0.5s steps(3) infinite;
-webkit-animation: arrowAnimation 0.5s steps(3) infinite;
animation: arrowAnimation 0.5s steps(3) infinite;
}
I've been racking my brain on whether it's possible to have a div show a never-ending "conveyor belt" pattern that always goes in one direction.
You can take a div, tile a background image in one direction with repeat-x, then create a keyframe that moves the background-position by the width of one tile, which will bring the background to the same position where it was at the beginning of the transition.
What I can't figure out is how to "reset" the background-position, so that the cycle can run once again and create the illusion of continuous single-direction motion. Can this be done in CSS?
I could animate a gif and fake it that way, but they are rather large/slow to load & there is always a stutter during the loop.
Thanks!
Found something relevant on a website, after a brief search.
Sprites file:
Fiddle:
http://jsfiddle.net/CGmCe/8676/
Browser support: http://caniuse.com/#feat=css-animation
HTML:
<div class="hi"></div>
CSS:
.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
I have this: http://d.pr/i/A2b3 which acts as the divider between the header and the main content.
The image is set as the background image, repeat-x, of the header container.
<header> <--- image is background of this
<div id="container"></div>
</header>
I want the image to slide across the screen slowly almost in a wave like effect. Is this possible with CCS3 animations? If so can someone help?
Thanks
I would suggest using jQuery and a simple image slider with a shortened image pause so the image keeps on switching. As far as i know its not possible to get a video to appear in a slider (not without a play button of some sort). http://www.catchmyfame.com/2009/06/04/jquery-infinite-carousel-plugin/ would be an example of what i would use.
Try this!
CSS:
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 created a Fiddle for you to play with here:
http://jsfiddle.net/e3WLD/3/