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
Detailed explanation of TS numeric separators and stricter class attribute checks
Table of contents Overview in operator refinement...
Introduction to Kubernetes (k8s)
I had always wanted to learn Kubernetes because i...
Steps to configure IIS10 under Win10 and support debugging ASP programs
Microsoft IIS IIS (Internet Information Server) i...
How to add vim implementation code examples in power shell
1. Go to Vim's official website to download t...
Implementation code for partial refresh of HTML page
Event response refresh: refresh only when request...
Solution to navicat automatically disconnecting from the database after a period of time
This is because the database server is set to aut...
MySQL Tutorial: Subquery Example Detailed Explanation
Table of contents 1. What is a subquery? 2. Where...
Vue Element front-end application development: Use of API Store View in Vuex
Table of contents Overview 1. Separation of front...
HTML Basics_General Tags, Common Tags and Tables
Part 1 HTML <html> -- start tag <head>...
Search optimization knowledge to pay attention to in web design
1. Link layout of the new site homepage 1. The loc...
A complete list of commonly used HTML tags and their characteristics
First of all, you need to know some characteristi...
Complete steps for using Echarts and sub-packaging in WeChat Mini Program
Preface Although the holiday is over, it shows up...
Detailed explanation of Nginx's connection limit configuration for IP addresses in a network segment
The so-called connection limit in Nginx is actual...
Element avatar upload practice
This article uses the element official website an...
Detailed explanation of various usages of proxy_pass in nginx
Table of contents Proxy forwarding rules The firs...