Writing in the front

Immediately 2020, do not know friends this year to learn cSS3 animation?

CSS animation is an awkward issue, because companies don’t use CSS animation very much, and most developers are used to JavaScript animation, so many programmers are reluctant to learn CSS animation (at least I am). But a front-end engineer who doesn’t know CSS animation can’t be called a master of CSS3. In fact, when you really learn CSS animation, you will be attracted by its charm, which can reduce the amount of code and improve performance.

On the occasion of 1024 Programmers’ festival, I hereby launch a small case of animation for students to learn. This case is very simple, but it can help us consolidate the animation we learned last time, and let you have a basic understanding of animation to learn later.

Without further ado, please begin with me.

1024 Animation Cases

Build a static page

<style>
    .outBox ul{
        display: flex;
    }
    .outBox li{
        list-style: none;
        margin: 20px;
        font-size: 120px;
        position: relative;
        top: 0px;
        color:#fff;
    }
</style>
<body>
    <div class="outBox">
        <ul>
            <li>1</li>
            <li>0</li>
            <li>2</li>
            <li>4</li>
        </ul>
    </div>
</body>
Copy the code

When you’re done, you’ll get 1024 big characters on the screen, and since we’re doing a jump effect that appears out of thin air, we’ll make it white.

Making simple animations

.outBox li:nth-child(1){
    animation: myMove 1.5 s ease alternate infinite ;
}
.outBox li:nth-child(2){
    animation: myMove 1.5 s ease 0.5 s alternate infinite ;
}
.outBox li:nth-child(3){
    animation: myMove 1.5 s ease 1s alternate infinite ;
}
.outBox li:nth-child(4){
    animation: myMove 1.5 s ease 1.5 s alternate infinite ;
}
@keyframes myMove{
    0%{
        color: rgb(229, 255, 80);
        top: 160px;
    }
    50%{
        color:rgb(2, 150, 200);
        top: 0px;

    }
    100%{
        color: rgb(255, 106, 198);
        top: 160px; }}Copy the code

Adding this code will animate each number up and down, and each number will jump out in turn, changing colors. Since it is the content of the last article, I will not repeat it here.

The final result

@keyframes myMove{
    0%{
        color: rgb(229, 255, 80);
        top: 160px;
        transform: rotateY(0deg) scale(1.0);
    }
    50%{
        color:rgb(2, 150, 200);
        top: 0px;
        transform: rotateY(180deg) scale(1.5);
    }
    100%{
        color: rgb(255, 106, 198);
        top: 160px;
        transform: rotateY(0deg) scale(1.0); }}Copy the code

Transform: rotateY(xxDEg) Scale (1.0); You can achieve the image effect at the beginning of the article.

Here we get to the transform property, which is the transform property, where rotateY(0deg) means rotation around the Y-axis of symmetry, and the middle of the parentheses is the rotation Angle. In scale(1.0) is used to zoom in and out, and the content in parentheses is responsible for the size. Put in the case to mean the default size, default Angle, run until the middle text is flipped and enlarged symmetrically, and then change to the initial stage at the end of the run.

conclusion

After reading this article, you will find that it is very easy to implement an animation, especially after you learn animation, it is naturally easy to learn Transform. Translate and Transform are not actually animators, but transfiguration and transform are often used in animation, and people often confuse them, so I’ve used them together. This case is just a response to 1024 launched practice cases, I hope to learn CSS animation together with the students can write a code alone, I believe you will be able to have their own understanding of animation, at the same time for the next learning will also play a great help. Follow my footsteps and master CSS animation by 2020!

conclusion

The above is the whole content of this article, if there are incorrect places welcome to correct.

Thank you for reading. If you find it useful, please like it/forward it.

Front-end in-depth series is a pit series, which is an exploration and summary of the problems AND pits I have encountered in work and study. It is recorded and shared here, and also a reflection and questioning of my skills.

The front end road is diffuse, step pit ceaseless.

Front-end in-depth series continues to be updated…

More than 2019-10-24.