CSS3 uses animation attributes to achieve cool effects (recommended)
|
animation-name animation name, can have multiple values, separated by commas, indicating that multiple animations are bound The animation-name property assigns a name to the animation. animation-name is compatible with mainstream browsers, but still needs to be prefixed for compatibility animation-name has two property values, keyframename and none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
div{
width:800px;
height:800px;
margin:0 auto;
}
.container{
position: relative;
}
.inner, .middle, .outer, .pic{
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.inner{
background:url(source/circle_inner.jpg) center no-repeat;
animation-name:circle_inner;
}
.middle{
background:url(source/circle_middle.jpg) center no-repeat;
animation-name:circle_middle;
}
.outer{
background:url(source/circle_outer.jpg) center no-repeat;
animation-name:circle_outer;
}
.pic{
background:url(source/pic.jpg) center no-repeat;
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
<div class="middle"></div>
<div class="outer"></div>
<div class="pic"></div>
</div>
</body>
</html>animation-duration The animation duration defaults to 0 animation-timing-function animation timing function animation-delay animation delay time The animation-delay property defines when the animation starts. The unit can be seconds (s) or milliseconds (ms). Negative values are allowed. -2s makes the animation start immediately, but will skip 2s into the animation. animation-iteration-count animation loop count animation-iteration-count: number | infinite Default is 1 animation-direction: normal | reverse | alternate | alternate-reverse alternate and alternate-reverse, if animation-iteration-count is not set to infinite, will only execute once and then stop animation-fill-mode The animation delay is not executed, or the pause state after the animation is completed (the animation cannot be set to loop, otherwise it cannot be stopped) animation-fill-mode: none | forwards | backwards | both No end state Start state depends on the situation animation-play-state: running | paused animation-play-state: running | paused animation shorthand animation: name duration timing-function delay iteration-count direction fill-mode play-state
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
div{
width:800px;
height:800px;
margin:0 auto;
}
.container{
position: relative;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.inner, .middle, .outer, .pic{
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.container:hover div{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-ms-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
.inner{
background:url(source/circle_inner.jpg) center no-repeat;
/*cycle*/
-webkit-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
-moz-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
-ms-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
-o-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
animation:circle_inner 10s ease-in-out 1s infinite alternate running;
/*No loop, filling effect*/
/*-webkit-animation:circle_inner 10s ease-in-out 1s forwards running;
-moz-animation:circle_inner 10s ease-in-out 1s forwards running;
-ms-animation:circle_inner 10s ease-in-out 1s forwards running;
-o-animation:circle_inner 10s ease-in-out 1s forwards running;
animation:circle_inner 10s ease-in-out 1s forwards running;*/
}
.middle{
background:url(source/circle_middle.jpg) center no-repeat;
-webkit-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
-moz-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
-ms-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
-o-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
animation:circle_middle 10s ease-in-out 1s infinite alternate running;
}
.outer{
background:url(source/circle_outer.jpg) center no-repeat;
-webkit-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
-moz-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
-ms-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
-o-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
animation:circle_outer 10s ease-in-out 1s infinite alternate running;
}
.pic{
background:url(source/pic.jpg) center no-repeat;
}
@keyframes circle_inner{
0%{ transform:rotateX(0deg); }
50%{ transform:rotateX(90deg); }
100%{ transform:rotateX(360deg); }
}
@keyframes circle_middle{
0%{ transform:rotateY(0deg); }
50%{ transform:rotateY(90deg); }
100%{ transform:rotateY(360deg); }
}
@keyframes circle_outer{
0%{ transform:rotateZ(0deg); }
50%{ transform:rotateZ(90deg); }
100%{ transform:rotateZ(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
<div class="middle"></div>
<div class="outer"></div>
<div class="pic"></div>
</div>
</body>
</html>
Animation performance optimization: Use position-fixed instead of background-attachment Elements with images are placed in pseudo-elements will-change Compatibility with IE13+ I feel like I can give up... Downward arrow effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
div{
width:30px;
height:30px;
position: fixed;
left:0;
right:0;
bottom:100px;
margin:0 auto;
cursor:pointer;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-animation:upDown 2s ease-in-out infinite;
-moz-animation:upDown 2s ease-in-out infinite;
-ms-animation:upDown 2s ease-in-out infinite;
-o-animation:upDown 2s ease-in-out infinite;
animation:upDown 2s ease-in-out infinite;
}
@-webkit-keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
@-moz-keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
@-ms-keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
@-o-keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
@keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
</style>
</head>
<body>
<div>></div>
</body>
</html>
Summarize The above is what I introduced to you about using the animation attribute in CSS3 to achieve cool effects. I hope it will be helpful to you! |
<<: Basic understanding and use of HTML select option
>>: Mysql implements master-slave configuration and multi-master-multi-slave configuration
Recommend
Nginx handles http request implementation process analysis
Nginx first decides which server{} block in the c...
Let's deeply understand the event object in js
We know that the commonly used events in JS are: ...
Use Vue3 to implement a component that can be called with js
Table of contents Preface 1. Conventional Vue com...
Steps for using the non-installed version of MySQL and solutions for forgetting the password
The first step is to unzip the compressed package...
Detailed explanation of concat related functions in MySQL
1. concat() function Function: Concatenate multip...
Centos7.5 configuration java environment installation tomcat explanation
Tomcat is a web server software based on Java lan...
Complete steps to install MySQL 8.0.x on Linux
MySQL Introduction to MySQL MySQL was originally ...
Explain how to analyze SQL efficiency
The Explain command is the first recommended comm...
Issues with using Azure Container Registry to store images
Azure Container Registry is a managed, dedicated ...
Commands to find domain IP address in Linux terminal (five methods)
This tutorial explains how to verify the IP addre...
CentOS7 network configuration under VMware virtual machine (host wireless Internet access)
This is the first time I used the CentOS7 system ...
Detailed explanation of the use of $emit in Vue.js
1. Parent components can use props to pass data t...
Detailed explanation of how to use several timers in CocosCreator
1. setTimeOut Print abc after 3 seconds. Execute ...
Summary of new usage examples of computed in Vue3
The use of computed in vue3. Since vue3 is compat...
Five guidelines to help you write maintainable CSS code
1. Add a comment block at the beginning of the sty...