My passion for CSS Animation

Creative Coding

12/8/2023

In this post, I share my passion for CSS animation and its possibilities and a small project I made.

When I first found out about the CSS animation, I was amazed by how much you can achieve very impressive results without even using JavaScript.

So I decided to get to know about keyframe animation.

The logic of behind it is to define the animation via @keyframe property. Then assign the defined animation via a CSS class to the HTML element. In this example, I used transform and scale properties to make the dots move.

Moreover, it is possible to use variables as values for transformation. Here I created three classes with different variables for the end values of animation. I assigned the classes to different dots in HTML to make them move differently.

The topic of animations is also covered in this amazing video.

‍


.point {
  animation:
      bounce alternate infinite
      cubic-bezier(.2, .65, .6, 1);
  animation:
      scale alternate infinite
      cubic-bezier(.2, .65, .6, 1);
}

@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(
      var(--bounce-offset));
  }
}

@keyframes scale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(
      var(--bounce-scale));
  }
}
.bounceone {
  --bounce-offset: -20px;
  --bounce-scale: 1.2;
  animation-duration: 200ms;
}

.bouncetwo {
  --bounce-offset: -30px;
  --bounce-scale: 1.6;
    animation-duration: 300ms;
}

.bouncethree {
  --bounce-offset: -40px;
  --bounce-scale: 0.8;
  animation-duration: 400ms;
}

‍

My passion for CSS Animation

Creative Coding

12/8/2023

In this post, I share my passion for CSS animation and its possibilities and a small project I made.

BLOG POSTS

FROM

THE PAST

BLOG POSTS

FROM

THE PAST

Labels done right

Typography

Mar 21

Art Design and Everything Inbetween

Inspiration

Mar 19

Always keen

for a good

collab

hello@daryna.digital