Web animations are a joy. They enhance the user experience by providing visual feedback, guiding tasks, and vitalize a website. Web animations can be created in several ways, including JavaScript libraries, GIFs, and embedded videos. But for a few reasons, the simple combination of SVG and CSS is attractive.
Comprised of code rather than thousands of raster image frames, they are powerful and have a faster loading time than heavy GIFs and videos. In addition, there are many simple animations that can be created without adding another JavaScript plugin to the page load of your website. SVGs are based on vectors to boot, so they scale perfectly throughout screen sizes and zoom levels without creating pixelization.
Now, perhaps you're curious to know why CSS? Why not use SMIL? As it turns out, SMIL support is declining.
Chrome is heading towards deprecating SMIL for CSS animations and the Web Animations API.
So we're going with CSS animations... but how are they made?
We're going to learn how to make these lightweight, scalable animations in this article!
A simple middle ground
There is not just one way animate the SVGs: we can use the tag < animate > directly in the SVG code or implement other methods. Today, we're going to look at another way: using inline SVG (SVG code right inside HTML) and animating the parts right through CSS.
We played with this recently as our agency was looking to freshen up the corporate image. Our latest design uses SVG quite a bit and we thought this would be another perfect opportunity to use it some more.
The finished product is pretty simple. Here's it is:
Let's check out how it's done. It's really very simple.
The plan was to make a super simple classic logo, colors, and general branding. Then add a little flair.
We put all the parts together in Illustrator: letters and icon.
IMPORTANT: the logo and tagline text are outlines. That means they are just vector shapes and will render just perfectly as-is in the SVG, as < path >s.
Then, we save the image directly as SVG.
To optimize it and remove the DOCTYPE and stuff, you might want to run it through SVGO. But more importantly, you're going to want to give the different shape class names for this post, so we can select them and do stuff in CSS!
You can copy-and-paste that SVG right into the HTML. But that'll just slop up the template probably. In all likelihood you'll just do something like:
< img src="/path/image.svg" >
or
< ?php include("path/image.svg"); ? >
Now we have the shapes in the DOM and we can target and style them like any other HTML element, let's do that.
For the first animation , we use < clipPath >: The
A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.
In thiscase we make a rect element inside a the < clipPath >
< clipPath id="mask" >
< rect x="0" y="0" width="600" height="300" fill="#000" id="#cool_shape" >
< /rect >
< /clipPath >
We then added the < animate> element, which allows us to animate scalar attributes and properties over a period of time.
< animate attributeType="XML" attributeName="manologo" from="-600" to="0"
dur="10s" repeatCount="indefinite"/ >
And...that's it!
SVG Logo animation with CSS
In this case we will use a text-plain svg, to better understand the relationship between the elements.
Anyway, remember to simplify your SVG
When an SVG is created, it has extra code that is often unnecessary. So, optimizing it is important.
Create groups
Open the SVG and take note of the < g > and < path > elements in a code editor. < g > is used for grouping SVG elements. Wrap them in < g> and name them with a class or ID if you want to animate a group of elements together. If you anticipate styling more than one path in the same way, consider converting ID names to class names (IDs can only be used once). You will be able to target them with CSS once you have an ID or class on the shape. For now, there will be no visible change when you save the SVG.
Set SVG styling
SVGs have attributes that are similar to CSS styles but are set directly on the SVG. An obvious example is a fill color. Because these styles are set on the SVG, you should assume that the browser holds a lot of weight, but it is not totally correct. The important thing, as always, is to optimize the code.
Applying CSS to SVGs
Now that we've got the SVG clean, let's get into how to put the CSS in. When it comes to applying CSS to an SVG, there are a few considerations.
We can apply the css in different ways:
1. Embed the SVG code inline in the HTML.
This renders the SVG element and its contents part of the DOM tree of the document, thus affecting them by the CSS of the document. This method separates the styles from the markup.
< rect id="example" width="100" height="10" x="1" y="50" transform="rotate(90 20 14)" />2. Include the CSS in the SVG within
< style >
tag
< svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" > < style type="text/css" > < ![CDATA[ rect { fill: #333; } ]] > < /style > < g > < rect id="example" width="100" height="10" x="1" y="50" transform="rotate(90 20 14)" / > < /g > < /svg >
3. Include the CSS in the SVG with an external link
< ? xml-stylesheet type="text/css" href="style.css" ? >
4. Use inline CSS styles in the SVG
< rect id="example" width="48" height="4" x="1" y="23" transform="rotate(90 20 14)" style="fill: #000;"/ >
Ma-No logo example
In this simple animation, we add a class called "mano-letter" to the path element to which we have applied our own CSS animations:
.mano-letter { -webkit-animation: pop 3s ease alternate infinite; animation: pop 3s ease alternate infinite; } .mano-letter:nth-child(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .mano-letter:nth-child(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .mano-letter:nth-child(4) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .mano-letter:nth-child(5) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } @-webkit-keyframes pop { 90% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } }>@keyframes pop { 90% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } #dot { -webkit-transform: translateY(150px); transform: translateY(150px); -webkit-animation: popup 5s 6.5s ease infinite; animation: popup 5s 6.5s ease infinite; } @-webkit-keyframes popup { 0% { -webkit-transform: translateY(150px); transform: translateY(150px); } 34% { -webkit-transform: translateY(20px); transform: translateY(20px); } 37% { -webkit-transform: translateY(150px); transform: translateY(150px); } 100% { -webkit-transform: translateY(150px); transform: translateY(150px); } } @keyframes popup { 0% { -webkit-transform: translateY(150px); transform: translateY(150px); } 34% { -webkit-transform: translateY(20px); transform: translateY(20px); } 37% { -webkit-transform: translateY(150px); transform: translateY(150px); } 100% { -webkit-transform: translateY(150px); transform: translateY(150px); } }
Enjoy the example:
Silvia Mazzetta
Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 years old geek, founder of @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple years of website design expertise behind her. She turns conceptual ideas into highly creative visual digital products.
Related Posts
New graphic window units - CSS
''Intercop 2022' is a project announced by Google, Microsoft, Apple and the Mozzilla Foundation to make all browsers offer the same web experience. The project has 15 focus areas and one…
Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3
HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…
Why shouldn't we use black?
Nowadays it is becoming more and more common for web pages to have the option to set them in dark mode, or to base their aesthetics directly on black or…
How to make your own custom cursor for your website
When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…
Nesting: future proofing CSS
Although not currently supported by browsers, there is a proposal for CSS nesting to support a feature that would provide better readability to native CSS, so in the future it…
Use the SRCSET attribute to improve your SEO
There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…
Starting with Bootstrap-Vue step by step
Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…
Bootstrap 5 beta2. What offers?
Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites.…
Creating simple CSS spinner-loader
In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…
How to use Parallax.js effect on your website
Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…
How to make the website's dark mode persistent with Local Storage, CSS and JS
Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…
The easiest way to align items using flexbox
With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…