Twinkle-Twinkle

How to animate stars in the background with CSS

---

Hey all! the team over at:

got some good feedback (thanks!) about the twinkling stars in the background of the page.

I couldn't find any tutorials online so I thought I'd show you how we did it and you can play around with it and use it in your own pages.

It's a whole lot easier than you might think :)

>>> Here is a simplified version I drew up in CodePen

---

HTML

<div id="star-container"><div>

• The HTML just needs one div. See? Easy!
• This will be the container for the stars that will be created by JS
  
  

---

CSS

#star-container {
  background-color: black;
  height: 100vh;
}

• Container gets a black background and takes up the whole screen
  
  

.star {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: white;
}

• This is a class that will apply to each star (the element doesn't exist yet!)
• The absolute positioning means we can change where they will be displayed on the page using CSS properties like top: and left:
  
  

  @keyframes twinkle {
    0%   { opacity: 1; }
    50%  { opacity: 0.2; }
    100% { opacity: 1; }
  }

• This is a very simple animation that will change the opacity of the element it is applied to over time.
• If you've not used keyframes before here is a CSS-TRICKS page explaining the use and the syntax!
  
  

---

JS

const starContainer = document.getElementById('star-container')

for (let i = 0; i < 100; i++) {
    const element = document.createElement('div')
    element.style.top=`${Math.random()*100}%`
    element.style.left=`${Math.random()*100}%`
    element.style.animation = `twinkle ${1+Math.random()*10}s ease-out infinite`
    starContainer.appendChild(element)
    element.setAttribute('class', 'star')
    }

This is where stuff gets a little tricky but it's only 1 paragraph so I'll go through it step by step:

for (let i = 0; i < 100; i++) { 

• Does something x100 you know the deal
  
  

const element = document.createElement('div') 

• Creates an HTML <div> element
  
  

element.style.top=`${Math.random()*100}%` 

• This is where the absolute positioning comes into play: it sets the CSS style of the created element to be a random % away from the top (so down)
  
  

element.style.left=`${Math.random()*100}%` 

• Same as above, but away from the left (so right)
  
  

element.style.animation = `twinkle ${1+Math.random()*10}s ease-out infinite` 

• Adds the CSS animation property to the element (see keyframes link above) including a random duration of 0-10 seconds +1 (this is so that the animation time will never be <1 in which case the star would become a pretty angry strobe light)
  
  

starContainer.appendChild(element) 

• Makes the element a child (puts it inside of) our HTML star-container div
  
  

element.setAttribute('class', 'star') 

• Sets the class of our element to "star", which is something we've already defined in our CSS :)
  
  

All done!

Now you can twinkle to your hearts content

---

Stuff to play around with

• Background colour / img / opacity of star-container div
• Size / shape / colour of stars (% sizes help with responsivity ;))
• What the Keyframes animation does at different points
• Where the stars will be created on the page
• Use z-indexing to make sure stars are displayed behind / infront of other elements on page as desired

Stretch goal:

• See if you can write some JS to create the stars in different colours ;)