To create the animation you need to have two images of the luggage (closed and open) in SVG/ png format (to practice only you can use mine which I drew in Adobe Illustrator CC) and follow the steps below:
Practicing SVG Path drawing I created the SVG Handwriting Animation.
I’ve tried several ways to make this animation, and I found (in my opinion) the easiest way is to create the text in Adobe Illustrator (or any different program which creates SVG’s) by using the path tools like the Pen tool, or the Pencil tool.
Draw your text
This time I used the Pencil tool, and renamed each path (like on the image below, I drew the letter L and I named this path as an L). This will make the animation easier to set up later.
I drew the letters one by one but if you want to draw more letters on the same path that will be okay too.
Draw your text and export it like an SVG. (To see how to create an SVG file click here).
What is a CSS Animation?
An animation lets an element gradually change from one style to another one. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation.
Note: The animation will finish in 4 seconds. It will gradually change the background color of the <div> element from “green” to “yellow”. After the animation, the square changes back to its original color.
Click on the square to repeat the animation.
The animation-durationproperty defines how long time an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0 seconds.
The following example will change the background and the position of the <div> element when the animation is 50% complete, and again when the animation is 100% complete:
The animation-direction property specifies whether the animation should be played forward, backward, or in alternate cycles.
The animation-direction property can have the following values:
normal (default) – the animation is played as normal (forward). reverse – the animation is played in the reverse direction (backward). alternate – the animation is played in forward first, then backward. alternate-reverse – the animation is played backward first, then forward.
I am 30 years old and I worked as a graphic designer in the UK for the last 5 years and recently decided to change direction to become a software developer.
I loved my job and working on my projects but I am feeling that it’s time for making a career change. Just I can not see myself doing this job for the rest of my life… I have always wanted to learn programming languages (even started with CSS and HTML many years ago during my University years) and I wanted to make stuff with code.
Have you ever wondered if you’re “too old” to start learning how to program?
Am I too old to learn how to code?
I believe that NO, it’s never too late to learn something new. There is no age that’s “too old” to learn to code. The only matter is your willingness to learn! Believe in yourself, set the goal, and do it. Learning code became my priority, so why I started this blog and I am here writing this post. I think, that this blog will be the best way to register my progress. Maybe this page can help also other people like me trying to learn code.