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

Detailed explanation of mktemp, a basic Linux command

mktemp Create temporary files or directories in a...

mysql5.7.20 installation and configuration method graphic tutorial (mac)

MySQL 5.7.20 installation and configuration metho...

How to view the IP address of Linux in VMware virtual machine

1. First, double-click the vmware icon on the com...

Circular progress bar implemented with CSS

Achieve results Implementation Code html <div ...

Getting Started with CSS3 Animation in 10 Minutes

Introduction Animation allows you to easily imple...

Briefly understand the MYSQL database optimization stage

introduction Have you ever encountered a situatio...

Detailed explanation of Nginx Location configuration (Location matching order)

Location means "positioning", which is ...

How to quickly modify the table structure of MySQL table

Quickly modify the table structure of a MySQL tab...

MySQL trigger usage scenarios and method examples

trigger: Trigger usage scenarios and correspondin...

A practical record of checking and processing duplicate MySQL records on site

Table of contents Preface analyze Data Total Repe...

Problems and solutions for installing Docker on Alibaba Cloud

question When installing Docker using Alibaba Clo...

Solution to MySQL server login error ERROR 1820 (HY000)

Fault site: Log in to the MySQL server and get th...

Detailed explanation of Web front-end performance optimization: resource merging and compression

Resource merging and compression for two purposes...

MySQL learning notes: data engine

View the engines supported by the current databas...

10 content-related principles to improve website performance

<br />English address: http://developer.yaho...