This is the 21st day of my participation in the Novembermore Challenge.The final text challenge in 2021

introduce

A long time ago, about 15 years ago when I started out, I saw a foreign guy writing a CSS bounce animation on Codepen. This was the first animation I saw that was implemented purely in CSS. I was very interested in this animation. So, in this installment, we will use SCSS to animate a bouncing ball without js.

Let’s take a look at the effect

I don’t know if you have any idea after reading it. It is relatively simple. Next, we will explain how to implement it.

The body of the

Based on the interface

<div id="app">
    <div class="loading">
        <div class="balls">
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
        </div>
        <p class="txt"></p>
    </div>
</div>
Copy the code
@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");

#app{
    width:100%;
    height:100vh;
    overflow: hidden;
    background:radial-gradient(#8f44ad.#6e3662);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading{
    width: 200px;
    height: 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    .txt{
        display: block;
        &::after{
            content: "Loading";
            font-family: "Baloo Bhaijaan", cursive;
            color: white;
            font-size: 1.8 em;
            display: block;
            text-shadow: 0 0 10px white;
            letter-spacing:.1em; }}}Copy the code

Div. loading will be centered on the screen with an elastic layout. Then we have a p.tuck below it. In addition, we used text-shadow to add a glow effect to make it stand out. Of course, you can also use the pseudo class directly in P.txt, I use the pseudo class because one of my earlier versions of the text also did the typing animation, but it feels too much movement is too confusing, and it is not the focus of this issue to remove this part.

Small ball draw

.balls{
    width: 100%;
    height: 2em;
    box-sizing: border-box;
    padding: 0 1.2 em;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    .ball{
        position: relative;
        left: -.5em;
        &::before{
            content: "";
            display: block;
            width:1em;
            height:1em;
            border-radius: 50%;
            background-color: white;
            transform-origin: 50%;
            position: absolute;
            box-shadow: 0 0 10px white;
        }
        &::after{
            content: "";
            display: block;
            width:1em;
            height:4px;
            border-radius: 50%;
            background-color: rgba(0.0.0.3);
            transform-origin: 50%;
            filter: blur(2px);
            position: absolute;
            top: 5px; }}}Copy the code

Here we put three balls in div.balls earlier. Each ball will be divided into two parts:

  • Ball body: use the pseudo-class before to complete, which is to draw a circle and use box-shadow to create an outer glow effect.
  • Ball shadow: Use the pseudo-class after to complete the shadow of the ball. Here we will draw a small black translucent ellipse in order to have a three-dimensional feeling. Finally, we will blur it to make it more realistic.

Bounce animation

Let’s first analyze it. The ball bouncing can be divided into two animations, namely, the deformation of the ball falling from the top to touch the ground, and the zoom in and out animation of the shadow of the ball falling. Since these animations want to be associated, we first define a time variable to control them, and then finish them one by one.

$t:0.5 s;
.balls{&::before{
    	// ...
    	animation: pellet $t alternate infinite linear;
    }
    &::after{
        // ...
        animation: shadow $talternate infinite linear; }}@keyframes pellet{
    0%{
        border-radius: 50%;
        transform: translateY(-50px) scaleX(1);
    }
    60%{
        border-radius: 50%;
        transform: translateY(-20px) scaleX(1);
    }
    100%{
        border-radius: 50% 25%;
        height:.4em;
        transform: translateY(0px) scaleX(1.7); }}@keyframes shadow{
    0%{
        transform: scaleX(.2);
        opacity:.1 ;      
    }
    60%{
        transform: scaleX(1);
        opacity:.7;
    }
    100%{
        transform: scaleX(1.5); }}Copy the code

In fact, there is nothing to be said here, but an ellipse is made in the animation through border-radius to simulate the elastic deformation when the ground is touched at this moment. The only thing we need to note is that the positions of these two animations must correspond to each other, because they are related animations after all.

Oh, and one more thing, we don’t want all three of these balls bouncing at the same time, we want each one to have a little bit of a delay, so it’s a little bit of a mismatch.

$n:3;
.balls{               
	@for $i from 1 through $n{&:nth-child(#{$i}) {
            &::before,
            &::after{
                animation-delay# {: -$i*.1s}; }}}}Copy the code

Here we use SCSS to iterate through each of his balls and set animation-delay for him. Remember to add “-“, because this will make him directly perform the animation in advance, without waiting at the beginning, otherwise the animation will fail.

That’s how the animation is done, isn’t it very simple, live demo.

conclusion

There is no fancy technique this time. It is mainly to imitate elastic deformation by animating border-radius, which is a kind of camouflage. Of course, CSS smokescreen itself is also a clever idea, many effects can make the user’s eyes shine. So use your imagination to create more creative animations