0

I have a page with an image as a link that fades in and out and repeats infinitely. I would like to increase the time between iterations of the animations, a pause, if you will. I don't want the image to blink on and off, but fade in and out and then stay away for a while, then come back as a reminder. I would also like the animation to not start (i.e. the image is not visible on page load) for several seconds after the page loads. Is this possible using CSS only? 

.click {margin-left: 26%;
  -webkit-animation: clickMe 4.5s ease-in-out 3s infinite; /* Safari 4+ */
  -moz-animation:    clickMe 4.5s ease-in-out 3s infinite;  /* Fx 5+ */
  -o-animation:      clickMe 4.5s ease-in-out 3s infinite;  /* Opera 12+ */
  animation:         clickMe 4.5s ease-in-out 3s infinite;  /* IE 10+, Fx 29+ */}

@-webkit-keyframes clickMe {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }

}
@-moz-keyframes clickMe {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes clickMe {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes clickMe {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}
mahatma57
  • 9
  • 1
  • As mentioned in the linked thread, `animation-delay` (which you have used in your snippet) introduces a delay only for the first cycle. To add delay for subsequent cycles you need to modify the keyframes like mentioned there. – Harry Sep 07 '15 at 04:49
  • 1
    Thanks for the link to the other question @Harry. This helped me get a better understanding of how keyframes work, and now I have my animation working just the way I want it. – mahatma57 Sep 08 '15 at 18:27

0 Answers0