Code Tips: CSS Swinging Christmas Lights

So as a developer I often come across snippets of code that are so simple but took me so long to find! If you’re like me and your forever searching for how to do something that should be fairly simply then this series is for you. It’s been a while since I blogged due to being seriously busy but I think ‘Code Tips’ will be a great way for me to get back into blogging and enhance my coding skills. If you see a section of code I’ve written and you know a shortcut, please feel free to contribute in the comments!

So the first Code Tips is making some Christmas Lights or anything swing on your website

Just take me to the code

The first step of course is to get a hold of a PNG image of Christmas Lights or any image you want to make swing, Google has an amazing feature on it’s image search page where you can view images labeled for reuse. Just make sure you check the individual CC license

Add the image into your website either via an [html]img[/html] or [html]div[/html] and assign it a [html]class[/html] or [html]id[/html]. For mine, I’m going to use a [html]div[/html] – [html]

[/html]
Now for the juicy code. We first need to setup the image position. I have an issue with my image in that it is not cropped and the actual bulbs are in the middle so I had to offset mine

.christmaslights
{
position:absolute;
top:-310px;
left:0px;
z-index:100;
width: 500px;
height: 500px;
background-image:url("/images/christmas-304506_1280.png");
-webkit-animation: image-swing 3s infinite ease-in-out;
-moz-animation: image-swing 3s infinite ease-in-out;
-moz-transform-origin: 0% 60%;
-webkit-transform-origin: 0% 60%;
transform-origin: 0% 60%;
}

Let’s talk through this line by line, excluding the positioning code as it is location and image specific.

[css]-webkit-animation: image-swing 3s infinite ease-in-out;[/css] – This tells the animation engine we want to use the [css]Keyframe[/css] [generic]image-swing[/generic], we want the animation to last 3 seconds, run it forever and use the style [css]ease-in-out[/css] which means we get a smooth transition throughout the animation

[css]transform-origin: 0% 60%;[/css] – As I said, my image is in the middle slightly so I need to define the ‘swivel’ or ‘grab’ point Read More on [css]Transform-Origin[/css]

Next we actually need to define [generic]image-swing[/generic], we do this using the CSS Keyframes

   
@-moz-keyframes image-swing
{
   0%{-moz-transform:rotate(45deg);}
   50%{-moz-transform:rotate(135deg);}
   100%{-moz-transform:rotate(45deg);}
}

@-webkit-keyframes image-swing
{
   0%{-webkit-transform:rotate(45deg);}
   50%{-webkit-transform:rotate(135deg);}
   100%{-webkit-transform:rotate(45deg);}
}

Okay. What does all this mean. It’s simple really, we want the animation to start the image at 45 degrees [css]0% { -webkit-transform:rotate(45deg) }[/css] then halfway through we want it to be at the exact same angle on the opposite side so we set the angle to 135 degrees [css]50% { -webkit-transform:rotate)(135deg) }[/css] then we repeat line one but set it to 100% [css]100% { -webkit-transform:rotate(45deg) }[/css] so we’re back to the starting position ready to repeat the animation as we defined it in the first section [css]infinite[/css]

That’s it. You can add extra code to extra percentages if you wanted. Make it run extra css so you could have the position move if you wanted. I added a flashing feature so it looked like the lights were flickering with power so my keyframes ended up looking like this

0%{-webkit-transform:rotate(45deg); filter:drop-shadow(8px 8px 10px yellow); -webkit-filter:drop-shadow(8px 8px 10px yellow);}
15%{filter:drop-shadow(0px 0px 0px transparent); -webkit-filter:drop-shadow(0px 0px 0px transparent);}
30%{filter:drop-shadow(8px 8px 10px yellow); -webkit-filter:drop-shadow(8px 8px 10px yellow);}
50%{-webkit-transform:rotate(110deg); filter:drop-shadow(0px 0px 0px transparent); -webkit-filter:drop-shadow(0px 0px 0px transparent);}
100%{-webkit-transform:rotate(45deg);}

---

Full Code

HTML:

CSS:

.yourdiv
{
 
  -webkit-animation: your-animation 3s infinite ease-in-out;
  -moz-animation: your-animation 3s infinite ease-in-out;
}

@-moz-keyframes your-animation{
    0%{-moz-transform:rotate(45deg);}
    50%{-moz-transform:rotate(110deg);}
    100%{-moz-transform:rotate(45deg);}
}
@-webkit-keyframes your-animation{
    0%{-webkit-transform:rotate(45deg);}
    50%{-webkit-transform:rotate(110deg);}
    100%{-webkit-transform:rotate(45deg);}
}