How to create a B2B social media marketing strategy
Sep 24, 2024Social media is one of the most used channels for B2B marketing strategies. Interestingly, it’s also one of the newest.…
Today I am going to demonstrate a few SVG animation examples using nothing more than HTML and CSS. Manipulating SVGs is really simple and is a hassle free way of adding interactivity to a website.
But, before we get started with the fun bits, lets talk a little bit about SVGs. Their popularity is growing throughout the world of web due to their ability to scale without losing clarity and the ease in which they can be manipulated using CSS. What’s more, browser support of SVGs is extremely good and no longer can be used as an excuse to not use them.
All examples covered in this post work with SVG code inserted directly into the HTML. This allows class names and ID’s to be added to the individual SVG paths, providing a way of manipulating the image for animations or hover effects.
With all of the examples you can view the code used to create the animations by clicking the HTML and LESS buttons on the Codepen box.
This is a simple animation, that uses CSS transforms to adjust the scale of each path along the Y axis. The addition of CSS transitions makes the transform smooth and happen over a set period, rather than instantly.
See the Pen SVG Animation – Hover by Andy Taylor (@tylrandy89) on CodePen.
We are getting slightly more complicated now and introducing CSS animations into the fold. Each hand (SVG Path) has the same linear keyframe animation applied to it, which rotates the hands around an origin on an infinite loop. The difference between the two paths is the duration time applied to the animation.
This example is purely for display purposes and the animation timings of the minute and hour hands are not accurate.
See the Pen Clock SVG Animation by Andy Taylor (@tylrandy89) on CodePen.
This animation uses similar techniques to the clock animation, however, we have combined various keyframe animations to provide a more realistic animation.
The cloud paths have been grouped together and animated using a single keyframe rule. This rule simply moves the clouds from position a above the viewing window, to position b below. The rocket flames use two different keyframe rules to change the colours, this has been set to loop infinitely. Finally the rocket keyframe scales down the rocket and moves it up the page to mimic the effect of taking off. Adding the ease-in animation property slowly speeds up the take off.
See the Pen SVG Rocket Animation by Andy Taylor (@tylrandy89) on CodePen.
Written by Andy Taylor, Web Developer at ExtraMile Communications.
At ExtraMile we try to take an hour out each week to look around us at what others do and to gain inspiration and to admire people’s creativity. Each post in this series is one staff member’s take on the world of web, design and things online. We hope you enjoy it.
Social media is one of the most used channels for B2B marketing strategies. Interestingly, it’s also one of the newest.…
If there’s one thing that SEO professionals everywhere would agree on, it’s that 2024 has been a tumultuous year for…
After a week of processing the talks and training sessions from BrightonSEO, the Extramile team are ready to share what…
Learn how to write engaging content with our expert blog writing tips. Blogging has become a must have tool for…
Come and see us at Advanced Engineering 2024, we’ll be at stand R200! On the 30th & 31st of October…