{"id":608,"date":"2023-09-16T23:59:55","date_gmt":"2023-09-16T23:59:55","guid":{"rendered":"https:\/\/www.cssportal.com\/blog\/?p=608"},"modified":"2024-02-28T23:24:48","modified_gmt":"2024-02-28T23:24:48","slug":"beginners-guide-to-css-animations","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/beginners-guide-to-css-animations\/","title":{"rendered":"Beginners Guide to CSS Animations"},"content":{"rendered":"

CSS animations are a powerful way to add interactivity and visual interest to your websites. With CSS animations, you can create effects such as fading elements in and out, moving elements around the page, changing the appearance of elements over time, and even simulate complex physics-based effects.<\/p>\n

To create a CSS animation, you need to do two things:<\/p>\n

    \n
  1. Define the animation keyframes. Keyframes are the different stages of the animation. For each keyframe, you specify the CSS properties that you want to animate and the values of those properties.<\/li>\n
  2. Apply the animation to an HTML element. Once you have defined your animation keyframes, you can apply the animation to an HTML element using the animation<\/code> property.<\/li>\n<\/ol>\n

    Defining animation keyframes<\/h3>\n

    Animation keyframes are defined using the @keyframes<\/code> at-rule. The @keyframes<\/code> at-rule takes the name of your animation as its argument. Inside the @keyframes<\/code> at-rule, you define one or more keyframes.<\/p>\n

    Each keyframe is defined by a percentage value and a set of CSS properties. The percentage value specifies when the keyframe should occur in the animation. The CSS properties specify the values that the element should have at that point in the animation.<\/p>\n

    For example, the following code defines a simple animation that bounces an element up and down:<\/p>\n

    \n
    CSS<\/div>\n
    @keyframes bounce {\r\n  0% {\r\n    transform: translateY(0);\r\n  }\r\n  50% {\r\n    transform: translateY(-10px);\r\n  }\r\n  100% {\r\n    transform: translateY(0);\r\n  }\r\n}\r\n<\/code><\/pre>\n
    \n
    This animation has three keyframes:<\/p>\n
      \n
    • The first keyframe occurs at 0% of the animation. At this point, the element's transform: translateY()<\/code> property is set to 0, which keeps the element in its original position.<\/li>\n
    • The second keyframe occurs at 50% of the animation. At this point, the element's transform: translateY()<\/code> property is set to -10px, which moves the element 10 pixels down.<\/li>\n
    • The third keyframe occurs at 100% of the animation. At this point, the element's transform: translateY()<\/code> property is set back to 0, which moves the element back to its original position.<\/li>\n<\/ul>\n
      Applying animations to HTML elements<\/h3>\n
      Once you have defined your animation keyframes, you can apply the animation to an HTML element using the animation<\/code> property. The animation<\/code> property takes the name of your animation as its value.<\/p>\n
      For example, the following code applies the bounce<\/code> animation to the .box<\/code> element:<\/p>\n
      \n
      CSS<\/div>\n
      .box:hover {\r\n  animation: bounce 1s linear;\r\n}\r\n<\/code><\/pre>\n<\/div>\n
      This code tells the browser to animate the .box<\/code> element using the bounce<\/code> animation over a period of 1 second. The linear<\/code> timing function specifies that the animation should play at a constant speed. You can see the result of this animation below.<\/p>\n
      \n
      Animation Result<\/div>\n