My css3 animation project

**grimofdoom** · #1 - Posted on Sat Jun 09, 2012 2:16 am

I could not find a proper forum to do this in, so i am going to do this here. The project i am doing is with css3 animations. I am going to make a animated background(spacey) and moving character(one for now till i can successively get one down.) from the Atari space game.

Anyone is allowed to use or edit this but at least some credit(name: Timothy Leitzke or just username or my email: Email removed).

I will post every so often pieces as i complete them and when i Finnish, i will post a code of it all put together(will only work with chrome, safari and any other browser that supports -webkit-(feeling lazy in work,though when i finnish ill add the rest of the browser supports)).

Last edited by grimofdoom on Sat Jun 09, 2012 3:52 am; edited 1 time in total

**grimofdoom** · #2 - Posted on Sat Jun 09, 2012 3:46 am

Here is the background so far(v.2). I just used 1 keyframe to animate the 13 divs(star) around the inside of the black div. To add diffrent times to the stars,i used delays:

Code:: <html> <head> <style type=text/css> .back{background-color:black;width:30%;height:20%;position:relative } .star1{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:10%;top:50%;width:3px;height:3px;-webkit-animation:star 3s infinite 2000ms; } .star2{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:25%;top:75%;width:3px;height:3px;-webkit-animation:star 3s infinite 1000ms; } .star3{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:13%;top:60%;width:3px;height:3px;-webkit-animation:star 3s infinite 1400ms; } .star4{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:10%;top:31%;width:3px;height:3px;-webkit-animation:star 3s infinite 134ms; } .star5{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:93%;top:32%;width:3px;height:3px;-webkit-animation:star 3s infinite 2364ms; } .star6{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:16%;top:65%;width:3px;height:3px;-webkit-animation:star 3s infinite 593ms; } .star7{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:83%;top:28%;width:3px;height:3px;-webkit-animation:star 3s infinite 4000ms; } .star8{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:54%;top:37%;width:3px;height:3px-webkit-animation:star 3s infinite 2893ms; } .star9{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:6%;top:1%;width:3px;height:3px;-webkit-animation:star 3s infinite 156ms; } .star10{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:24%;top:17%;width:3px;height:3px;-webkit-animation:star 3s infinite 1543ms; } .star11{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:55%;top:4%;width:3px;height:3px;-webkit-animation:star 3s infinite 486ms; } .star12{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:58%;top:48%;width:3px;height:3px;-webkit-animation:star 3s infinite; } .star13{-webkit-transform:rotate(45deg);background-color:white;position:relative;left:66%;top:23%;width:3px;height:3px;-webkit-animation:star 3s infinite 654ms; } @-webkit-keyframes star{ 0%{background-color:white;} 50%{background-color: #FFD700;box-shadow:0px 0px 3px yellow;} 100%{background-color:white;} } </style> </head><body> <div class=back> <div class=star1></div> <div class=star2></div> <div class=star3></div> <div class=star4></div> <div class=star5></div> <div class=star6></div> <div class=star7></div> <div class=star8></div> <div class=star9></div> <div class=star10></div> <div class=star11></div> <div class=star12></div> <div class=star13></div> </div> </body> </html>

(update:stars glow to and from without abrupt back to white)