remove javascript from css3 animation

Question

At the moment, I have a style like this:

.clip td{
  -webkit-transition: background-color 1000ms linear;
  -moz-transition: background-color 1000ms linear;
  -o-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}

I then add a css class and then use setTimeout to remove the class giving a simple fade animation.

Is it possible to achieve the same effect without javascript and have a complete css solution?

Different animation, but apart from that it seems to be the same question: [Simple CSS Animation Loop – Fading In & Out “Loading” Text](http://stackoverflow.com/questions/23985018/simple-css-animation-loop-fading-in-out-loading-text) — GolezTrol, Nov 05 '14 at 21:40
Can you make a working code sample that includes your JS? Does it get run on some event or click, or just as soon as the page loads? — CodingWithSpike, Nov 05 '14 at 21:40

score 0 · Accepted Answer · answered Nov 05 '14 at 21:44

Use CSS3 animation and use it's delay and timing functions. You probably still end up using JS to trigger the animation if it doesn't happens right after page load.

Chris has a nice article to help you understand and write CSS3 animations:

http://css-tricks.com/snippets/css/keyframe-animation-syntax/

remove javascript from css3 animation

1 Answers1