This is the fifth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Yesterday, I learned the animation feature of CSS, and made a simple enlarged font effect.

The link is as follows: juejin.cn/post/699250…

Today we’ll learn about a less familiar CSS property: Transform.

MDN official document: developer.mozilla.org/zh-CN/docs/…

The transform attribute allows you to rotate, scale, tilt, or translate a given element. This is done by modifying the coordinate space of the CSS visual formatting model.

Among them, the optional transformation style is called transform-functions. The MDN document lists several transform-functions, including matrix, Matrix3D, Perspective, rotate and so on.

This article uses the Animation function from the previous article and the Rotate function from the Transform.

There are a few key points worth noting

  1. The speed in the animation property value is set to Linear. Indicates that the animation changes at a constant speed.

If you use the default ease, which is the default slow down, you can see that the animation has a noticeable lag effect when converting to 25%, 50%, and 75%. This also helps us understand that the speed function in the animation is for each paragraph in @keyFrames, not from start to finish. With ease as the default, the effect will look like this:

  1. In the animation property, the number of times to play is defined as: infinate, which means an infinite number of times to play, so that the animation can be played ina loop.

The final playing effect is as shown in the picture below:

<! DOCTYPEhtml>

<body class="border">
    <div class="rotate">Go China! Olympic athletes refueling!</div>
</body>
<style>
    .border {
        border: 1px solid black;
    }
    body {
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .rotate {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50px;
        color: red;
        animation: rotate 10s linear infinite;
        -webkit-animation: rotate 10s linear infinite;
        
    }

    @keyframes rotate {
        0% {
            transform: rotate(0);
        }

        25% {
            transform: rotate(90deg);
        }

        50% {
            transform: rotate(180deg);
        }

        75% {
            transform: rotate(270deg);
        }

        100% {
            transform: rotate(360deg); }}@-webkit-keyframes rotate {
        0% {
            transform: rotate(0);
        }

        25% {
            transform: rotate(90deg);
        }

        50% {
            transform: rotate(180deg);
        }

        75% {
            transform: rotate(270deg);
        }

        100% {
            transform: rotate(360deg); }}</style>

</html>
Copy the code

PS: The software used for making the animation is ScreenToGif.