CODEWITHSUNDEEP
htmlcssdelaycss-animations
DMS
DMS

Reputation: 7

CSS3 animations delay issue

I have three images in my html file that I want to scale one at a time. I've tried placing these delays: -moz-animation-delay: -2s; and animation-delay:2s; within the ID #animation-container2 and #animation-container3. All the images still scale at the same time. What am I doing incorrectly?

The html 

<div id="splashPage">
     <ul>
     <li>   <img src="images/vintage.png" alt="Vintage" id="animation-container"> <li>
     <li>   <img src="images/computers.png" alt="Computer" id="animation-container2"> <li>
     <li>   <img src="images/online.png" alt="Online" id="animation-container3" > <li>
     </ul>
     <img src="images/enter.gif" alt="enter" id="enterClick"> 
    </div>

The CSS:

#animation-container {
  animation: inout 2s;
  animation-iteration-count: 1;
  -webkit-animation: inout 3s; /* Safari & Chrome */
  margin: auto;
}
@keyframes inout {
  25%   { transform: scale(2, 2); }
}
#animation-container2 {
  -moz-animation-delay: 5s;
  animation: inout 2s;
  animation-iteration-count: 1;
  -webkit-animation: inout 3s; /* Safari & Chrome */
  margin: auto;
}
@keyframes inout {
  25%   { transform: scale(2, 2); }
}
#animation-container3 {
  -moz-animation-delay: 10s;
  animation: inout 2s;
  animation-iteration-count: 1;
  -webkit-animation: inout 3s; /* Safari & Chrome */
  margin: auto;
}
@keyframes inout {
  25%   { transform: scale(2, 2); }
}

Upvotes: 0

Views: 197

Answers (1)

Inkbug
Inkbug

Reputation: 1692

Here is some new and cleaner CSS that should work:

#animation-container {
  animation: inout 2s 0s 1;
  -webkit-animation: inout 2s 0s 1;
  margin: auto;
}
#animation-container2 {
  animation: inout 2s 5s 1;
  -webkit-animation: inout 2s 5s 1;
  margin: auto;
}
#animation-container3 {
  animation: inout 2s 10s 1;
  -webkit-animation: inout 2s 10s 1;
  margin: auto;
}
@keyframes inout {
  25%   { transform: scale(2, 2); }
}
@-webkit-keyframes inout {
  25%   { -webkit-transform: scale(2, 2); }
}

See fiddle.

Upvotes: 1

Related Questions