I have animated sprites with css steps and when tested on Firefox and Explorer11 i understand that it do not behave like Chrome.
I have the animattion like the below
#keyframes sprite {
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
My sprites are vertical. And i have teh animation like this on the elements
-webkit-animation: sprite 3.5s steps(60) infinite; // the frame count is minus - from original frame count
-moz-animation: sprite 3.5s steps(60) infinite;
-ms-animation: sprite 3.5s steps(60) infinite;
-o-animation: sprite 3.5s steps(60) infinite;
animation: sprite 3.5s steps(60) infinite;
background: url(images/sprites/solutions/solution_2_61square_450-min.png) no-repeat 0 0% !important;
background-size: 100% !important;
So all are shaking In Explorer and do not play in Firefox.
Any idea why?
See working demo https://jsfiddle.net/anahitdev/02kmpr6u/
Thanks
Change your keyframe css code to this , so it will support all
browser.
#keyframes sprite {
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
#-webkit-keyframes sprite {/* Chrome and Safari*/
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
#-moz-keyframes sprite { /* Mozilla Firefox */
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
#-ms-keyframes sprite { /*Internet Explorer*/
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
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.
I try to make an animation that run every 3 seconds without JavaScript. My animation's duration is 1 second.
I'm only able to wait 3seconds the first occurence then it's a loop of 1s animation.
My code so far: https://jsfiddle.net/belut/aojp8ozn/32/
.face.back {
-webkit-animation: BackRotate 1s linear infinite;
-webkit-animation-delay: 3s;
animation: BackRotate 1s linear infinite;
animation-delay: 3s;
}
.face.front {
-webkit-animation: Rotate 1s linear infinite;
-webkit-animation-delay: 3s;
animation: Rotate 1s linear infinite;
animation-delay: 3s;
}
#-webkit-keyframes Rotate {
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(360deg);}
}
#-webkit-keyframes BackRotate {
from {-webkit-transform:rotateY(180deg);}
to {-webkit-transform:rotateY(540deg);}
}
#keyframes Rotate {
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(360deg);}
}
#keyframes BackRotate {
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(360deg);}
}
I know how to do it with javascript: https://jsfiddle.net/belut/fk3f47jL/1/
I tried this answer without success: Cycling CSS3 animation with a pause period?
Can you help me please?
EDIT
Thanks great answers i'm also able to make this scenario:
wait 2s, run 1s flip, wait 2s, run 1s back_flip, wait 2s.
#f1_container {
position: relative;
margin: 10px auto;
width: 90px;
height: 90px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
}
img {
width: 90px;
height: 90px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
}
.face.back {
-webkit-animation: BackRotate 5s linear infinite;
}
.face.front {
-webkit-animation: Rotate 5s linear infinite;
}
#-webkit-keyframes Rotate {
0%,40% {-webkit-transform:rotateY(0deg);}
50%,90% {-webkit-transform:rotateY(180deg);}
100% {-webkit-transform:rotateY(360deg);}
}
#-webkit-keyframes BackRotate {
0%,40% {-webkit-transform:rotateY(180deg);}
50%,90% {-webkit-transform:rotateY(360deg);}
100% {-webkit-transform:rotateY(540deg);}
}
It seems like the only way to achieve this is to extend the animation so that it lasts 4s instead of 1s. Then you could delay the animation by animating from 75% to 100% (rather than 0% to 100%).
In doing so, there is essentially an artificial delay in the animation itself. You just have to do the math to figure out how long this delay is in correlation with the total length of the animation itself.
Updated Example
.face.back {
display: block;
transform: rotateY(180deg);
}
.face.back {
-webkit-animation: BackRotate 4s linear infinite;
animation: BackRotate 4s linear infinite;
}
.face.front {
-webkit-animation: Rotate 4s linear infinite;
animation: Rotate 4s linear infinite;
}
#-webkit-keyframes Rotate {
75% {-webkit-transform:rotateY(0deg);}
100% {-webkit-transform:rotateY(360deg);}
}
#-webkit-keyframes BackRotate {
75% {-webkit-transform:rotateY(180deg);}
100% {-webkit-transform:rotateY(540deg);}
}
#keyframes Rotate {
75% {-webkit-transform:rotateY(0deg);}
100% {-webkit-transform:rotateY(360deg);}
}
#keyframes BackRotate {
75% {-webkit-transform:rotateY(180deg);}
100% {-webkit-transform:rotateY(540deg);}
}
I am not sure exactly when it was released, and it's not the most cross-browser approach (does not cover older browsers like I.E. 9) but you could use the animationPlayState style prop. Theres some documentation on this found here if you want to check it out.
animationPlayState=false
webkitAnimationPlayState=false
function pause() {
var animationElement = document.getElementById('animatedItem');
animationElement.style.animationPlayState='paused';
animationElement.style.webkitAnimationPlayState='paused';
}
As you can see this put's the items animation into a "paused"state, to put it back where it left the animation off at, you can set it to the "running" state that this prop accepts.
Here is a quick example I found when browsing Google.
I was able to do this, as #Josh mentioned, by extending the animation. For example, if you want your animation to last 0.5 seconds with a 3 second pause, you make the entire animation 3.5 seconds, and then use percentages to extend it. (0.5 seconds is about 14% of 3.5 seconds.)
In the code below, I created a DIV with transparent gradient that is the same width as the parent, and then animated it from left to right to give a shimmer effect.
.shimmer {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
background-image: -moz-linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* Opera11.10+ */
background-image: -ms-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* IE10+ */
background-image: linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* W3C */
background-repeat: repeat-y;
background-size: 30% 100%;
left: -100%;
z-index: 101;
animation-name: shine;
animation-duration: 3.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes shine {
0% { left: -100%; }
14% { left: 100%; }
100% { left: 100%; }
}
From 14% to 100%, the DIV doesn't move, but the animation continues for additional time, giving the effect of a pause.
You can add an ending state in the animation which will play like a delay. Check the example below, simple animation that runs for 4 sec but the last 3 sec is delayed.
body {
perspective: 500px;
}
/* clear background */
h2 {
text-align: center;
padding: 16px;
margin: 0;
}
/* crops animations that exceeds one line area */
.line {
width: 100%;
height: 4rem;
overflow: hidden;
padding: 0;
margin-bottom: 16px;
}
/* flipping class and key frames*/
.flipX {
animation: 4s anim-flipX ease infinite;
}
#keyframes anim-flipX {
0% {
opacity: 0;
transform: rotateX(9def);
}
20% {
/* animate nothing to pause animation at the end */
opacity: 1;
transform: rotateX(360deg);
}
60% {
/* animate nothing to pause animation at the end */
opacity: 1;
transform: rotateX(360deg);
}
100% {
/* animate nothing to pause animation at the end */
opacity: 1;
transform: rotateX(360deg);
}
}
<body>
<div class='line'>
<h2 class='flipX'>flip vertical</h2>
</div>
</body>
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 am trying to spin a null set image but my code is not working.
If I ran on my own computer, the picture goes black and spin.
What is the problem?
#-webkit-keyframes rotate {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
#refresh {
width:48px;
height:48px;
position:fixed;
top:150px;
right:150px;
background:url(http://etc.usf.edu/clipart/41700/41726/fc_nullset_41726_lg.gif);
-webkit-animation: rotate 2s linear infinite;
}
<div id="refresh" ></div>
http://jsfiddle.net/Pg2pj/
It seems to work just fine. Here: http://cssdesk.com/6VyMM
I updated your FIDDLE, have a look.
Hope this can help you
You can also use percent in your animation instead of from and to
CSS:
#-webkit-keyframes rotate {
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);}
}
#refresh {
width: 48px;
height: 48px;
top: 0px;
right: 0px;
background: grey url(http://etc.usf.edu/clipart/41700/41726/fc_nullset_41726_lg.gif) no-repeat;
background-size: 100% 100%;
-webkit-animation: rotate 2s linear 0s infinite;
}
Remember for cross-browser compatibility:
#-webkit-keyframes rotate {
0% { }
100% { }
}
#-moz-keyframes rotate {
0% { }
100% { }
}
#-o-keyframes rotate {
0% { }
100% { }
}
#keyframes rotate {
0% { }
100% { }
}
#refresh {
-webkit-animation: rotate 2s linear 0s infinite /* Safari 4+ */
-moz-animation: rotate 2s linear 0s infinite /* Fx 5+ */
-o-animation: rotate 2s linear 0s infinite /* Opera 12+ */
animation: rotate 2s linear 0s infinite /* IE 10+ */
}