CSS animation property usage and example code (transition/transform/animation)

CSS animation property usage and example code (transition/transform/animation)

During development, a good user interface will always be mixed with some animations. CSS uses the least amount of code to give users the best experience. Below I have summarized some usage methods and use case codes of CSS animation attributes for your reference. If there are any mistakes, I hope you can comment directly.

1 transition

Usage syntax:

transition: property duration timing-function delay;

parameter:

(1) property (CSS property name for setting transition effect): none | all | property. none means no property will get the transition effect; all means all properties will get the transition effect; property means a CSS property list, where multiple properties are separated by commas (,).

(2) duration (sets the time to complete the transition effect): seconds or milliseconds (s/ms).

(3) timing-function (sets the speed curve of the effect): linear, specifies that the effect starts and ends at the same speed, equivalent to cubic-bezier(0,0,1,1); ease, starts slowly and ends slowly, equivalent to cubic-bezier(0.25,0.1,0.25,1); ease-in, starts slowly, equivalent to cubic-bezier(0.42,0,1,1); ease-out, ends slowly, equivalent to cubic-bezier(0,0,0.58,1); ease-in-out, starts and ends slowly, equivalent to cubic-bezier(0.42,0,0.58,1); cubic-bezier(n,n,n,n), define your own value in this function, the value is between 0 and 1.

(4) delay (when the transition effect starts): the value of how many seconds it will take for the transition effect to be executed. For example, 2s means it will be executed after 2 seconds.

2 transform

The transform property applies a 2D or 3D transformation. This property allows us to perform four operations on elements: rotation, scaling, tilting, and moving.

Use syntax:

transform: none|transform-functions;

parameter:

(1) none: defines that no conversion is performed, which is generally used to register the conversion.

(2) transform-functions: defines the type function to be transformed. The main ones are:

Rotate: Mainly divided into 2D rotation and 3D rotation. rotate(angle), 2D rotation, the parameter is the angle, such as 45deg; rotate(x,y,z,angle), 3D rotation, 3D rotation around the line from the original position to (x,y,z); rotateX(angle), 3D rotation along the X axis; rotateY(angle); rotateZ(angle);

Scale: Generally used to set the size of an element. The main types are the same as above, including scale(x, y), scale3d(x, y, z), scaleX(x), scaleY(y), and scaleZ(z), where x, y, and z are the shrinkage ratios.

Skew: Mainly used to tilt the style of an element. skew(x-angle, y-angle), 2D skew transformation along the x and y axes; skewX(angle), 2D skew transformation along the x axis; skew(angle), 2D skew transformation along the y axis.

Move (translate): Mainly used to move elements. translate(x, y), defines the pixel points moved along the x and y axes; translate(x, y, z), defines the pixel points moved along the x, y, and z axes; translateX(x); translateY(y); translateZ(z).

3 animation

This property is mainly used to set animation properties.

Use syntax:

animation: name duration timing-function delay iteration-count direction;

parameter:

(1) name: The keyframe name that needs to be bound to the selector.

(2) duration: The time required to complete the animation, in seconds or milliseconds.

(3) timing-function: the motion speed curve of the animation. linear, specifies that the speed starts and ends at the same speed, which is equivalent to cubic-bezier(0,0,1,1); ease, starts slowly and then ends slowly, which is equivalent to cubic-bezier(0.25,0.1,0.25,1); ease-in, starts slowly, which is equivalent to cubic-bezier(0.42,0,1,1); ease-out, ends slowly, which is equivalent to cubic-bezier(0,0,0.58,1); ease-in-out, starts and ends slowly, which is equivalent to cubic-bezier(0.42,0,0.58,1); cubic-bezier(n,n,n,n), defines its own value in this function, and the value is between 0 and 1.

(4) delay: sets the delay before the animation starts.

(5) iteration-count: Sets the number of times the animation is executed.

(6) direction: whether to poll the animation in reverse. normal, the default value, the animation should play normally; alternate, the animation should play in reverse order.

The following shows the test code for these elements:

<!DOCTYPE html>
<html>
<head>
    <title>transition/transform</title>
</head>
<style type="text/css">
    #div1 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: red;
    }
    #div2 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: green;
    }
    #div3 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: blue;
    }
    #div4 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: #234F21;
    }
    #div5 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: #af123c;
    }
    #div6 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: #affa3c;
    }
    /* transition implements multiple properties */
    #div1:active {
        width:200px;
        height: 200px;
        transition: width 2s ease, height 2s ease;
        -moz-transition: width 2s ease, height 2s ease; /* Firefox 4 */
        -webkit-transition: width 2s ease, height 2s ease; /* Safari and Chrome */
        -o-transition: width 2s ease,height 2s ease; /* Opera */
    }
    /* transform rotate */
    #div2:hover {
        transform:rotate(35deg);
        -ms-transform:rotate(35deg); /* IE 9 */
        -moz-transform:rotate(35deg); /* Firefox */
        -webkit-transform:rotate(35deg); /* Safari and Chrome */
        -o-transform:rotate(35deg); /* Opera */
    }
    /* transform scale */
    #div3:hover {
        transform:scale(0.8, 1.5);
        -ms-transform:scale(0.8, 1.5); /* IE 9 */
        -moz-transform:scale(0.8, 1.5); /* Firefox */
        -webkit-transform:scale(0.8, 1.5); /* Safari and Chrome */
        -o-transform:scale(0.8, 1.5); /* Opera */
    }
    /* transform skew */
    #div4:hover {
        transform:skew(35deg);
        -ms-transform:skew(35deg); /* IE 9 */
        -moz-transform:skew(35deg); /* Firefox */
        -webkit-transform:skew(35deg); /* Safari and Chrome */
        -o-transform:skew(35deg); /* Opera */
    }
    /* transform translate */
    #div5:hover {
        transform:translate(45px, 45px);
        -ms-transform:translate(45px, 45px); /* IE 9 */
        -moz-transform:translate(45px, 45px); /* Firefox */
        -webkit-transform:translate(45px, 45px); /* Safari and Chrome */
        -o-transform:translate(45px, 45px); /* Opera */
    }
    /* transform multiple effects */
    #div6:hover {
        transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);
        -ms-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); /* IE 9 */
        -moz-transform:rotate(35deg) scale(0.8,rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px) translate(45px, 45px); /* Safari and Chrome */
        -o-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); /* Opera */
    }
</style>
<body>
    <div id="div1">transition</div>
    <div id="div2">transform rotate</div>
    <div id="div3">transform scale</div>
    <div id="div4">transform skew</div>
    <div id="div5">transform translate</div>
    <div id="div6">transform</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>transition/transform</title>
</head>
<style type="text/css">
    /* animation */
    .div7 {
        width:100px;
        height:100px;
        background:red;
        position:relative;
        animation:myfirst 5s infinite;
        animation-direction:alternate;
        /* Safari and Chrome */
        -webkit-animation:myfirst 5s infinite;
        -webkit-animation-direction:alternate;
    }
    @keyframes myfirst{
        0% {background:red; left:0px; top:0px;}
        25% {background:yellow; left:200px; top:0px;}
        50% {background:blue; left:200px; top:200px;}
        75% {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
    @-webkit-keyframes myfirst {/* Safari and Chrome */
        0% {background:red; left:0px; top:0px;}
        25% {background:yellow; left:200px; top:0px;}
        50% {background:blue; left:200px; top:200px;}
        75% {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
  @-moz-keyframes myfirst {/* Firefox */
    0% {background:red; left:0px; top:0px;}
        25% {background:yellow; left:200px; top:0px;}
        50% {background:blue; left:200px; top:200px;}
        75% {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
  }
  @-o-keyframes myfirst {/* Opera */
    0% {background:red; left:0px; top:0px;}
        25% {background:yellow; left:200px; top:0px;}
        50% {background:blue; left:200px; top:200px;}
        75% {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
  }
</style> <body> <div class="div7">animation</div> </body> </html>

Summarize

The above is the introduction of CSS animation attribute usage and example code (transition/transform/animation) by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time!

<<:  How to execute Linux shell commands in Docker

>>:  nuxt.js multiple environment variable configuration

Recommend

How to fix abnormal startup of mysql5.7.21

A colleague reported that a MySQL instance could ...

JavaScript to achieve digital clock effects

This article example shares the specific code for...

How to implement real-time polygon refraction with threejs

Table of contents Preface Step 1: Setup and front...

MySQL 8.0.20 Installation Tutorial with Pictures and Text (Windows 64-bit)

1: Download from mysql official website https://d...

Kill a bunch of MySQL databases with just a shell script like this (recommended)

I was woken up by a phone call early in the morni...

Processing ideas for decrypting WeChat applet packages on PC in node.js

Table of contents Where is the source code of the...

CSS realizes the layout method of fixed left and adaptive right

1. Floating layout 1. Let the fixed width div flo...

Looping methods and various traversal methods in js

Table of contents for loop While Loop do-while lo...

How to create Baidu dead link file

There are two types of dead link formats defined b...

Detailed tutorial on building an ETCD cluster for Docker microservices

Table of contents Features of etcd There are thre...

One line of CSS code to achieve the integration of avatar and national flag

It’s National Day, and everyone is eager to celeb...

Detailed steps for remote deployment of MySQL database on Linux

Linux remote deployment of MySQL database, for yo...

Detailed explanation of how to create multiple instances of MySQL 5.6 in centos7 environment

This article describes how to create multiple ins...

Use semantic tags to write your HTML compatible with IE6,7,8

HTML5 adds more semantic tags, such as header, fo...

MySQL max_allowed_packet setting

max_allowed_packet is a parameter in MySQL that i...