HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  
  • You are not connected. Please login or register


    My css3 animation project

    avatar
    • ***


        Reputation : 2
        Registered on : 2012-06-05
        Posts : 42
      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

      avatar
      • ***


          Reputation : 2
          Registered on : 2012-06-05
          Posts : 42
        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)


        YOUR BANNER HERE
        728x90
        DMCA.com Protection Status
        Free forum | © PunBB | Free forum support | Contact | Report an abuse | Create a forum on Forumotion