07-CSS3动画
第1章 animation属性详解
1-1 animation-name
1-2 animation-duration
<!DOCTYPE html>
<html lang="en">
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
div{
font-family: 'Microsoft Yahei';
font-size: 60px;
font-weight: bold;
line-height: 600px;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 800px;
height: 600px;
margin: auto;
text-align: center;
border:5px solid #000;
border-radius: 50%;
animation-name: banner;
animation-duration: 2s;
}
@keyframes banner{
from{opacity: 1;}
to{opacity: 0;}
}
</style>
</head>
<body>
<div>大家好,欢迎来到慕课网!</div>
</body>
</html>
1-3 animation-timing-function
1-4 animation-delay
<!DOCTYPE html>
<html lang="en">
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
div{
font-family: 'Microsoft Yahei';
font-size: 60px;
font-weight: bold;
line-height: 600px;
position: absolute;
top: -1200px;
right: 0;
left: 0;
bottom: 0;
width: 800px;
height: 600px;
margin: auto;
text-align: center;
border:5px solid #000;
border-radius: 50%;
animation-name: disp;
animation-duration: 2s;
animation-delay: 2s;
}
@keyframes disp{
from{top: -1000px;}
to{top: 0;}
}
</style>
</head>
<body>
<div>大家好,欢迎来到慕课网!</div>
</body>
</html>
1-5 animation-iteration-count
1-6 animation-direction
1-7 animation-fill-mode
1-8 animation-play-state
1-9 animation
第2章 关键帧
2-1 @keyframes
第3章 动画性能优化
3-1 will-change原理
3-2 will-change应用