Swimming fish, SVG, CSS, Animations
It’s a small tank….
Today I wanted to practise my CSS skills and also get my fingers wet with animations..
If you would like to know how to animate a fish then this is the guide for you.
I’m going to tell you the steps I took so you can make your own journey.
Step 1.
I spent the day yesterday spending time, oh wow, read that again. I spent, the day, yesterday, spending time..
I should write songs not tutorials! Enough already, create your SVG file!!!
I started off with a fish I had previously made in Illustrator, if you are not sure there are plenty of free resources online to get SVG images. Try this https://www.cutcutcraft.com/free-svg-images-cricut-silhouette/
Once you have your SVG image, create a folder for the project, I called mine Goldfish. Using terminal.
<cmd>$ mkdir Goldfish
<cmd>$cd Goldfish
<cmd>$touch index.html && index.css
Then copy your svg into the directory you just created.
Open up your text editor and create a html template and link to your CSS file.
More precisely add <link rel=”stylesheet” href=”index.css”> to the <head> tag.
Inside the <body> tag place an img element.
Give it an id of fish.
Like so….
<img id=’fish’ src=”Asset 1.svg” style=”width: 100px;”>
I also styled mine inline, I could of done it in the CSS file but for sake of simplicity I put it there. Now open index.html in your browser or use WebServer for chrome to run a live local server.
You should now have a fish on your screen or whatever SVG image you are using.
Now for the animation…
Step 2.
Open up the index.css file you created in your text editor. We are going to edit the #fish id, so start with that..
#fish {
}
Inside there we have to tell the stylesheet where to look for the animation, we do that by declaring the name of the keyframes like this..
- webkit-animation: myfish 5s infinite;
This says look for the keyframes declaration called myfish, make it last 5s and do it an infinite number of times.
You should now have;
#fish {
-webkit-animation: myfish 5s infinite;
}
Next we can create the animations keyframes.
We declare it with;
@keyframes myfish {
}
Inside these brackets we are going to use percentages to describe the animation. You can also use the keywords from and to.
For example ‘from’ is equal to 0% and ‘to’ is equal to 100%
Let us say that by half way through the animation, so 2.5 seconds in, we want the fish to move to the right of the screen. It would look like this;
50% {margin-left: 50%;}
Okay we also want our fish to look around, so we can use;
20% {transform: rotateY(190deg);}
Let’s also mix it up with a little extra shift of direction;
30% {transform: rotateY(180deg);}
Your keyframe should now look like this…
@keyframes myfish {
50% {margin-left: 50%;}
20% {transform: rotateY(190deg);}
30% {transform: rotateY(180deg);}
}
That should be enough to make your fish swim across the page.
So somethings to talk about…
webkit;
The animations I have just described are not always compatible with older browsers so the folks at CSS W3C came up with webkit, it is a way to specify certain custom browser conditions. I have not used them in this example but if you find this doesn’t work for you then you may need to investigate webkit and what it can do for you.
Let me know how your fish swims! Make changes and see what else you can do with CSS animations.
