Is It Allowed to Use Any Decimal Value in CSS Keyframe Animations

Is it allowed to use any decimal value in CSS keyframe animations?

When it comes to CSS it takes notice of percentages down to 2 decimal places and then stops. So you would be able to get 33.34% but not 33.3457% for use in your keyframes

I hope this helps.

CSS3 keyframe animation: Set property without animation

Try setting your first 20% to 19.99%, so you will have animation like this:

@include keyframes(anim1) {
    0% { width: 10%; left: 50%; }
    10% { width: 30%; left: 100%; }
    19.99% { width: 30%; left: 100%; }
    20% { width: 0%; left: 0%; }
    30% { width: 80%; left: 100%; }
    100% { width: 100%; left: 100%; }
}

In this post @markblythe explains that percentages down to 2 decimal places are possible

CSS Keyframe Animation Similar to Stop Motion

Yes, but you can achieve this more beautifully, with JavaScript:

@-webkit-keyframes sprite {
  0%    { background-position: 0px 0px; }
  25%   { background-position: 0px 0px; }
  25.1% { background-position: -200px 0px; }
  50%   { background-position: -200px 0px; }
  50.1% { background-position: -400px 0px; }
  75%   { background-position: -400px 0px; }
  75.1% { background-position: -400px -200px; }
  99.9% { background-position: -400px -200px; }
  100%  { background-position: 0px 0px; }
}

@-moz-keyframes sprite {
  0%    { background-position: 0px 0px; }
  25%   { background-position: 0px 0px; }
  25.1% { background-position: -200px 0px; }
  50%   { background-position: -200px 0px; }
  50.1% { background-position: -400px 0px; }
  75%   { background-position: -400px 0px; }
  75.1% { background-position: -400px -200px; }
  99.9% { background-position: -400px -200px; }
  100%  { background-position: 0px 0px; }
}

@-o-keyframes sprite {
  0%    { background-position: 0px 0px; }
  25%   { background-position: 0px 0px; }
  25.1% { background-position: -200px 0px; }
  50%   { background-position: -200px 0px; }
  50.1% { background-position: -400px 0px; }
  75%   { background-position: -400px 0px; }
  75.1% { background-position: -400px -200px; }
  99.9% { background-position: -400px -200px; }
  100%  { background-position: 0px 0px; }
}

@keyframes sprite {
  0%    { background-position: 0px 0px; }
  25%   { background-position: 0px 0px; }
  25.1% { background-position: -200px 0px; }
  50%   { background-position: -200px 0px; }
  50.1% { background-position: -400px 0px; }
  75%   { background-position: -400px 0px; }
  75.1% { background-position: -400px -200px; }
  99.9% { background-position: -400px -200px; }
  100%  { background-position: 0px 0px; }
}
    
div.image {
  background: url('https://i.stack.imgur.com/lwOaY.jpg');
  width: 200px;
  height: 200px;
  -webkit-animation: 5s sprite infinite;
  -moz-animation: 5s sprite infinite;
  -o-animation: 5s sprite infinite;
  animation: 5s sprite infinite;
}

<div class='image'></div>

How To Sync CSS Animations Across Multiple Elements?

I don't think its possible natively, but you can actually hack similar functionality by using a bouncing wrapper and some position altering

html:

<div id="bouncywrap">
    <div id="bouncy01">Drip</div>
    <div id="bouncy02">droP</div>
<div>

CSS:

@-webkit-keyframes bounce {
    0% { padding-top:1px;}
/* using padding as it does not affect position:relative of sublinks
 * using 0 instead of 0 b/c of a box-model issue,
 * on kids wiht margin, but parents without margin, just try out
 */
    50% { padding-top:5px;} /*desired value +1*/
    100% { padding-top:1px;}
}

#bouncy01,
#bouncy02 {
    margin:10px;
    background: #ff0000;
    padding: 10px;
    border: 1px solid #777;
    width:30px;
       position:absolute;
}
#bouncywrap {
    -webkit-animation:bounce 0.125s ease-in-out infinite;
    position:relative;
    width:140px;
    height:50px;
/*    background:grey; /*debug*/
}
#bouncy02 {
    background: #ffff00;
    left:60px;
    top:2px; /*half of desired value, just a fix for the optic*/
}
#bouncy02:hover {
    position:relative; /*here happens the magic*/
    top:0px;
}

demo http://jsfiddle.net/A92pU/1/

---

Related Topics