{"id":575,"date":"2023-02-20T09:58:54","date_gmt":"2023-02-20T09:58:54","guid":{"rendered":"https:\/\/zaraknox.co.uk\/journal\/?p=575"},"modified":"2023-03-10T13:28:26","modified_gmt":"2023-03-10T13:28:26","slug":"article-css-animations","status":"publish","type":"post","link":"https:\/\/zaraknox.co.uk\/journal\/2023\/02\/20\/article-css-animations\/","title":{"rendered":"Article – CSS Animations"},"content":{"rendered":"\n

What is CSS animation?<\/strong><\/h2>\n\n\n\n

CSS animations are a way to add movement and interactivity to web pages using only CSS code, without the need for JavaScript or other programming languages. With CSS animations, we can create dynamic effects such as moving text and images, colour and font changes, and plenty of other visual touches.<\/p>\n\n\n\n

CSS is a powerful tool that is often capable of more than we can imagine. Andy Clarke\u2019s take on the AMC show Mad Men<\/em>‘s opening credits is a testament to what CSS can accomplish:<\/p>\n\n\n

\n
\"\"
View Madmanimation on GitHub<\/a><\/figcaption><\/figure><\/div>\n\n\n

<\/p>\n\n\n\n

Why use CSS animation?<\/strong><\/h2>\n\n\n\n

There are several reasons why you might want to use CSS animations in your web design:<\/p>\n\n\n\n

    \n
  1. Eye-catching visuals<\/em>: CSS animations can make your website more visually appealing and engaging for users. Animations can help to draw attention to important elements on the page, and create a sense of interactivity that can make the user experience more enjoyable.<\/li>\n\n\n\n
  2. Improved user experience<\/em>: Animations can also be used to improve the user experience by providing visual feedback when a user interacts with a particular element on the page. For example, when a user hovers over a button, the button might change colour or move slightly, giving the user a sense of feedback that their action has been registered.<\/li>\n\n\n\n
  3. Cross-browser compatibility<\/em>: CSS animations are supported by all modern browsers. Older browsers can be accounted for with vendor prefixes, which we will cover later on.<\/li>\n\n\n\n
  4. Performance<\/em>: Because CSS animations are native to the browser, they tend to be faster and more efficient than animations created using JavaScript. This can help to improve the performance of your website and ensure that it loads quickly for users. Also, why use the most fragile layer to create animations when we can make them using CSS, the more robust layer?<\/li>\n<\/ol>\n\n\n\n

    How to use CSS animation<\/strong><\/h2>\n\n\n\n

    Before we jump into some animations, let\u2019s take a look at what CSS technologies are available to us and how they work.<\/p>\n\n\n\n

    <\/p>\n\n\n

    \n
    \"\"<\/figure><\/div>\n\n\n

    The transform property is an extremely useful tool that allows us to move, resize, rotate, and skew HTML elements on the page. It should be noted that while transforms change how the element is displayed, it is does not create \u2018movement\u2019 or animation when used by itself. The trick is to combine the transform property with a transition or keyframe animation.<\/p>\n\n\n\n

    The following functions can be performed with transform:<\/p>\n\n\n\n

    translate<\/code>: Relocates the element on the page. This can be done on the horizontal axis with transform: translateX()<\/code>, the vertical axis with transform: translateY()<\/code>, or both the X and Y axis with translate()<\/code>.<\/p>\n\n\n\n

    scale<\/code>: Makes an element appear larger or smaller. You can provide a ratio with scale, such as transform: scale(1.5)<\/code>. This would make the element 150% larger than its original size.<\/p>\n\n\n\n

    skew<\/code>: Changes the angle of the element\u2019s axis by a specified number of degrees, stretching it out accordingly. In other words, it makes the element \u2018slanty\u2019. You can do this on the horizontal axis with scaleX()<\/code>, vertically with scaleY()<\/code>, or both with scale()<\/code>.<\/p>\n\n\n\n

    rotate<\/code>: Tilts the element\u2019s angle clockwise with a positive degree value, or anti-clockwise with a negative degree value. For example, to rotate an element by 45 degrees, you would write transform: rotate(45deg)<\/code>.<\/p>\n\n\n\n

    Here\u2019s a quick look at how we can apply multiple transforms to manipulate an image of a cloud:<\/p>\n\n\n

    \n
    \"\"<\/figure><\/div>\n\n\n

    If we wanted to move the cloud to the right, make it smaller, and rotate it slightly, we could write:<\/p>\n\n\n

    \n
    \"\"<\/figure><\/div>\n\n
    \n
    \"\"<\/figure><\/div>\n\n\n

    The result is a cloud that has been moved 500px to the right, scaled to half its size, and rotated to a 30 degree clockwise angle.<\/p>\n\n\n\n

    <\/p>\n\n\n

    \n
    \"\"<\/figure><\/div>\n\n\n

    Transitions in CSS are an integral part of animation and are often used in conjunction with the transform property to create smooth and fluid transitions between different states of an element.<\/p>\n\n\n\n

    Transitions allow you to specify how an element\u2019s property should change over time, and is activated when a user interacts with the element, such as hovering over it or clicking on it. Transitions enable us to control the speed and timing of the change, creating a smooth sense of motion.<\/p>\n\n\n\n

    The syntax for transitions consists of:<\/p>\n\n\n\n

    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];<\/code><\/p>\n\n\n\n

    To break it down:<\/p>\n\n\n\n