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

Solve the splicing problem of deleting conditions in myBatis

I just learned mybatis today and did some simple ...

javascript to switch pictures by clicking a button

This article example shares the specific code of ...

How to use resize to implement image switching preview function

Key Points The CSS resize property allows you to ...

Solution to the problem of being unable to access the Internet after Ubuntu restarts in VMWare

How to solve the problem of being unable to acces...

CentOS7 deployment Flask (Apache, mod_wsgi, Python36, venv)

1. Install Apache # yum install -y httpd httpd-de...

MySQL 8.0.16 compressed package installation and configuration method graphic tutorial

This article shares the installation and configur...

Detailed explanation of how to limit the update/delete range using the mysql parameter sql_safe_updates

Preface As you all know, we have encountered many...

Use of MySQL stress testing tool Mysqlslap

1. MySQL's own stress testing tool Mysqlslap ...

A brief analysis of MySQL parallel replication

01 The concept of parallel replication In the mas...

MySQL Optimization: Cache Optimization

I am happy that some bloggers marked my article. ...

ByteDance interview: How to use JS to implement Ajax concurrent request control

Preface To be honest, I've been feeling very ...

Solution to Linux server graphics card crash

When the resolution of the login interface is par...

Detailed introduction to JS basic concepts

Table of contents 1. Characteristics of JS 1.1 Mu...

Incomplete solution for using input type=text value=str

I encountered a very strange problem today. Look a...

Learn about JavaScript closure functions in one article

Table of contents Variable Scope The concept of c...