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
SQL implementation of LeetCode (183. Customers who have never placed an order)
[LeetCode] 183.Customers Who Never Order Suppose ...
Vue.set() and this.$set() usage and difference
When we use Vue for development, we may encounter...
Detailed explanation of using backgroundImage to solve the image carousel switching
Implementing carousel with a single DOM node You ...
How to define data examples in Vue
Preface In the development process, defining vari...
MySQL 8.0.11 MSI version installation and configuration graphic tutorial
This article shares the installation and configur...
Implementation of multiple instances of tomcat on a single machine
1. Introduction First of all, we need to answer a...
Mini Program to Implement Calculator Function
This article example shares the specific code of ...
CSS code to distinguish ie8/ie9/ie10/ie11 chrome firefox
Website compatibility debugging is really annoyin...
How to monitor Linux server status
We deal with Linux servers every day, especially ...
Vue3 (Part 2) Integrating Ant Design Vue
Table of contents 1. Integrate Ant Design Vue 2. ...
Win10+Ubuntu 20.04 LTS dual system installation (UEFI + GPT) (pictures and text, multiple pictures warning)
Win10 installation (skip if already installed) Fo...
How to import and export Docker images
This article introduces the import and export of ...
Brief analysis of the various versions of mysql.data.dll driver
Here is the mysql driver mysql.data.dll Notice: T...
A brief analysis of MySQL's lru linked list
1. Briefly describe the traditional LRU linked li...
Scary Halloween Linux Commands
Even though it's not Halloween, it's wort...