CSS-Animation, makes web elements within the HTML-file easier to animate, eliminating the need for Javascript and Jquery; it is purely CSS. CSS-Animation works hand in hand with a property called keyframes. Keyframes are a set of rules that go in conjunction with CSS, helping the browser understand what exactly to do with the animation.
Before starting on keyframes, it is important to understand, on how to get the animation working. This is achieved with the properties of, animation-name, duration, delay, iteration-count, direction, timing- function and fill-mode.
Each individual property, is key when trying to make the animation come alive. Beginning with, giving the animation a name. This name could be anything from square, to something as silly, as lemon (but a trick I keep in mind is that the name, should resemble the description of the animation, as this could be handy to you and other developers that may want to access your files later). After setting the name, give your animation a duration that you want it to play. So, if you have set your animation a colour and you set your duration to 4s, the colour you set at 50% on your keyframes will play at 2s. Where-as the iteration-count specifies each time the animation is played until the next value comes into use. The default setting is one, but you may want it to play twice, so the duration would become two, or you want it to play consistently which in that case you would set the property to infinite. You may even want to add a delay to the animation before it starts, so make sure to set the correct amount of seconds, that you want it to play.
The next property I would like to speak about is the animation-timing-function. This element specifies the movement of your animation. There are four functions that can help you identify on how you want the animation to move when you play. The most common ones, that are used, are linear, ease in -out, steps and cubic-bezier. Now linear is quite simple where the animation plays forwards, whereas ease in-out is just the animation easing inwardly before continuing to play forward. Whereas the steps is a block movement as though the animation was walking. For example, if you had an animation of a person walking to the shops, the shop might be the 6th step, so you would set your animation to 5 steps, this varies on where you want your animation to play until and how many steps it would take to get there. Lastly, there is cubic-bezier, this property, helps you control the timing and the transitions of the elements when moving. (this is a very handy website to help you set your cubic element ” https://cubic-bezier.com/#.17,.67,.83,.67 “). The initial way to do this, is controlling the four perimeters you have set to your cubic value. There are several websites that will automatically generate the value for you; one example being, the website I have mentioned above, just simply copying and pasting the value that the website has automatically set for you, can help you test and play with the movement. The next property I wanted to cover is the animation-direction. In simplified terms the direction can be forward, backwards, alternate and alternate-reverse. Alternate is forward first and then backwards and alternate-reverse is backwards first and then forwards.
Next, I want to cover the property named “animation-fill-mode”. Now at the beginning of the article, I wrote about “keyframes”. This is when the keyframes property can really come in handy as the animation-fill-mode will only play, if you have set your keyframe rules in place. Example being:
@keyframes square{
0% {transform: translateX(0px);}
100%{transform: translateX(700px);}
}
Animation-fill-mode, helps you specify, where you want to position your element after it has finished playing . So in my 100% value above I have moved my element 700px along the “x” axis. If I wanted my animation to remain there, I will set my animation-fill-mode to “forwards”. As forwards follows the set of rules of 100% and the “backwards” value follows the rules of 0%. If I now change my 0% value to translateX(-10) and want both rules to take affect, I would then change my animation-fill-mode value to “both”.
Now, after declaring all the property values I have mentioned throughout this article so far, the presentation of my CSS sheet should look something like this:
animation: square 4s linear 2s infinite alternate backwards running;
This makes the sheet more tidy, presentable and readable.
Finally, I wanted to cover some more points on keyframes. Above in this article, I have written attributes under the name of transform. The transform property, allows you, to visually manipulate the shape by scaling, rotating translating and skewing the element. You can scale the shape horizontally and vertically:
transform: scaleX(4);
transform: scaleY(.6);
Despite if the height and width is already declared, we can still give this function two values, which stretches the shape accordingly. An easier way to write this is “transform: scale(4, .6)”. This can also be applied to font-size and padding.
Skewing “skew()”, tilts the element, left or right turning a rectangle into a parallelogram. Rotating “rotate()”, shifts the element around to a degree’s you set, either clockwise or anti-clockwise and lastly translating “translate()”, moves the element up, down or sidewards.
CSS-Animation, is a great tool to use, without the need for any other languages and once practised, you can achieve a lot of visual designs. A website that helped me gain a better understanding was ” https://css-tricks.com/almanac/properties/t/transform/ “. Once, you have understood the basics of CSS-Animation it can be a lot of fun!
REFERENCE FOR SEMINAR-
Dev Dreamer. (13 Nov 2019).#32 CSS Animations – CSS Full Tutorial[Video].YouTube.https://www.youtube.com/watch?v=PjUCq04ebVA&list=PLsc3Otf-1dvNeHg22d34e8lxp30hMcxpc&index=9&t=252s
REFERENCE FOR BLOG:
Sara Cope.( Sep 6, 2011).Transform.Available-At:https://css-tricks.com/almanac/properties/t/transform/
Lea Verou.(No Date).Cubic-Bezier.Available-At: https://cubic-bezier.com/#.17,.67,.83,.67