0

I have this demo in code pen I want to add a fade in effect and a fade out effect to the floating boxes, but every-time I add ".webkit-animation: fadein" or fadeout the animation for the element stops working.

e.g.

-webkit-animation: fadein 5s;
TwoThumbSticks
  • 1,086
  • 3
  • 23
  • 38
  • 1
    possible duplicate of [How to do fade-in and fade-out with JavaScript and CSS](http://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css) – Sachin Kanungo Sep 13 '15 at 16:40
  • I want to do it in pure CSS sir no JavaScript. If you look at my example at code pen its pure CSS – TwoThumbSticks Sep 13 '15 at 16:44
  • css transitions are the way to go. Use scale and opacity as parameter. – Sachin Kanungo Sep 13 '15 at 16:45
  • http://jsfiddle.net/qrc8m/ Javascript is used only for click event and not any animation. By the way, JS is sexy. :) – Sachin Kanungo Sep 13 '15 at 16:46
  • :( I already have a complete css that handles the animation from start to finish, but I dont know how to modify it to have a fadein and fadeout effect everytime. If you look at the code here http://codepen.io/Paulie-D/pen/pjgzBg it starts and ends as intended but when I add a fadeout and fadein .webkit-animation: fadein the element being animated does not move – TwoThumbSticks Sep 13 '15 at 16:51
  • how do you expect fade in to happen. you haven't provided a event propogation element for css or js. Need element for something like hover. – Sachin Kanungo Sep 13 '15 at 16:56

1 Answers1

2

I think you need to define your animations simultaneously. You cannot simply define -webkit-animation: fadein 5s; in one of the nth-child divs because this will override the square animation you set on the lis themselves.

Additionally, try defining the fadein and fadeout animations like you defined the square one:

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

I edited your codepen: http://codepen.io/anon/pen/jbWEQv?editors=110. It has the square animation working in tandem with the fadein and fadeout animations, though you'll need to fix the timing because each square has special timing and I didn't change them all individually.

The main things to look at are the new fadein/out definitions that I made at the bottom of the css, and the code on lines 155 and 156:

-webkit-animation: fadein 12s infinite, square 24s infinite, fadeout 12s 12s infinite;
animation:         fadein 12s infinite, square 24s infinite, fadeout 12s 12s infinite;
daniman
  • 284
  • 1
  • 5