CSS Animation

I realised that my logo and text were static on my landing page and wanted to make this more interesting. I decided that I wanted my logo to move up and down so that it would appear as though it was floating.

Therefore I decided to use a CSS animation.
I researched how I would do this and found a page on W3schools that explained how it would work and then edited this code until I achieved the desired effect.



I used a class instead of an ID as I may want to use this effect elsewhere on my website.



There are two syntax's as one is specifically for safari (uses -webkit) while the other version is the standard syntax. I named the animation logo, as this animation is being used directly on my logo however I may need to rename this if I decide to use this animation elsewhere.
I set the duration for my animation to 3 seconds with a 2 second delay. The timing was set to linear as this created a smooth transition compared to the other timings I tried due to using the same speed from start to end. The count was set to infinate as I want my animation to be playing infinately.

In my code, the @keyframes sets the position of the object at an amount of keyframes. Each percentage is referring to the percentage of keyframes and therefore means that my logo is moving 5 - 10 pixels up and down.



Bibliography
W3SCHOOLS.COM. (2018). w3schools.com. [Source Code] [Online] Available at: https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation4 [Accessed: 16 December 2018]
W3SCHOOLS.COM. (2018). w3schools.com. [Source Code] [Online] Available at: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition2 [Accessed: 16 December 2018]
W3SCHOOLS.COM. (2018). CSS Animations. [Online] Available at: https://www.w3schools.com/css/css3_animations.asp [Accessed: 16 December 2018]

Comments

Post a Comment

Popular posts from this blog

Logo Design

Image
I specifically wanted my logo to be an SG as these are my initials. Therefore I attempted to a few different designs until I found the one that I liked. For this post, I have put my logos on blackgrounds so that they are visible. This was my original logo however I wanted to change this slightly as I feel as though it didn't fit the feel of my website and was too simple. When creating this logo, I took into consideration my background and the type of style I wanted to go for. I was inspired by my favourite game FEZ as I really like what they did with the title of the game. If you look at their logo closely you can see the logo from both angles and really liked this effect. I decided to put the S and the G at different angles as it resembles a butterfly. When you see my logo from a different angle it looks as though a butterfly is flapping it's wings which I believe fits well with my background. I played around with the design of my previous...
Read more

Bootstrap Template

Image
I decided to use a bootstrap template for my website as I thought this may have made elements faster to implement as the template would already be responsive. I researched the benefits of using bootstrap and according to Christopher Gimmer in his 2014 blog 'Top 5 Reasons to use Bootstrap', he stated in his conclusion that, "...there are several benefits to using Bootstrap. The framework allows for rapid, responsive development that is consistent and well supported by the development and design community." His five reasons were, "Speed of Development, Responsiveness, Consistency, Customizable, Support" which I understand and agree with and therefore believe it is beneficial to use bootstrap in this project. This specific bootstrap template was similar to my mockup design and therefore by editing the code this template could look similar to what I had designed and invisioned. Bibliography BOOTSTRAP THEMES. (2018). Boomerang – Bootstrap 4 Business ...
Read more