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

5 Easy Ways to Free Up Space on Ubuntu

Preface Most people will probably perform this op...

MySQL optimization tutorial: large paging query

Table of contents background LIMIT Optimization O...

HTML+CSS to achieve text folding special effects example

This article mainly introduces the example of rea...

CentOS 6.5 i386 installation MySQL 5.7.18 detailed tutorial

Most people compile MySQL and put it in the syste...

JavaScript implements fireworks effects with sound effects

It took me half an hour to write the code, and th...

Record a troubleshooting record of high CPU usage of Tomcat process

This article mainly records a tomcat process, and...

Why MySQL does not recommend using subqueries and joins

To do a paginated query: 1. For MySQL, it is not ...

Detailed explanation of the differences between the four types of positioning in CSS

We all know that the commonly used positioning me...

Detailed explanation of log processing of Docker containers

Docker has many log plug-ins. The default is to u...

Vue scroll down to load more data scroll case detailed explanation

vue-infinite-scroll Install npm install vue-infin...

How to hide rar files in pictures

You can save this logo locally as a .rar file and...

Linux user script creation/guessing game/network card traffic monitoring introduction

Table of contents 1. User created script 2. Word ...

CentOS server security configuration strategy

Recently, the server has been frequently cracked ...

Vue integrates Tencent Map to implement API (with DEMO)

Table of contents Writing Background Project Desc...

Details on how to write react in a vue project

We can create jsx/tsx files directly The project ...