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
How to add vim implementation code examples in power shell
1. Go to Vim's official website to download t...
A complete list of common Linux system commands for beginners
Learning Linux commands is the biggest obstacle f...
Detailed explanation of Vue ElementUI manually uploading excel files to the server
Table of contents Overview Property settings Proc...
Webservice remote debugging and timeout operation principle analysis
WebService Remote Debugging In .NET, the remote d...
How to convert rows to columns in MySQL
MySQL row to column operation The so-called row-t...
Briefly describe the installation of influxDB distributed time series database and related operations in Docker
Introduction to influxDB influxDB is a distribute...
CentOS 7.2 builds nginx web server to deploy uniapp project
Panther started as a rookie, and I am still a roo...
Flame animation implemented with CSS3
Achieve results Implementation Code html <div ...
Centos7 installation and configuration of Mysql5.7
Step 1: Get the MySQL YUM source Go to the MySQL ...
The difference between two MySQL delete user statements (delete user and drop user)
Tip: In MySQL, we often need to create and delete...
The space is displayed differently in IE, Firefox, and Chrome browsers
The display effects on IE, Fir...
Explanation of several ways to run Tomcat under Linux
Starting and shutting down Tomcat under Linux In ...
MySQL 5.7.13 installation and configuration method graphic tutorial (win10 64 bit)
This article shares with you the graphic tutorial...
Mac+IDEA+Tomcat configuration steps
Table of contents 1. Download 2. Installation and...
Summary of 10 must-see JavaScript interview questions (recommended)
1.This points to 1. Who calls whom? example: func...