效果動畫.gif
animation
- animation-name：動畫名
- animation-duration：動畫執(zhí)行時間
- animation-interaction-count：1/2/.../infinate; 執(zhí)行動畫次數(shù)
- animation-fill-mode：forwards; 終止狀態(tài)
- animation-direction：alternate; 動畫結束后的執(zhí)行方向
- animation-timing-function：linear/ease/ease-in/ease-out/ease-in-out; 動畫過渡效果
- animation-delay：延時時間
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo08_ball</title>
<style>
* {
margin: 0px;
padding: 0px;
}
section {
width: 50%;
height: 600px;
margin: 10px auto;
border: 1px solid silver;
border-radius: 2px;
text-align: center;
position: relative;
}
div#ball {
width: 200px;
height: 200px;
border: 0 none;
background-image: radial-gradient(180px at center 10px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
border-radius: 200px;
position: absolute;
left: 100px;
/*動畫名稱*/
animation-name: ball;
/*動畫時間*/
animation-duration: 0.6s;
/*終止狀態(tài)*/
animation-fill-mode: forwards;
/*執(zhí)行順序：結束后反方向*/
animation-direction: alternate;
/*執(zhí)行次數(shù)*/
animation-iteration-count: infinite;
/*過渡效果*/
animation-timing-function: ease-in;
}
div#shadow {
width: 160px;
height: 30px;
background-color: rgba(125, 125, 125, 0.6);
border-radius: 160px / 30px;
position: absolute;
top: 300px;
left: 130px;
animation-name: shadow;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
@keyframes ball {
0% {
top: 20px;
}
100% {
top: 115px;
}
}
@keyframes shadow {
0% {
width: 160px;
height: 30px;
top: 300px;
left: 120px;
}
100% {
width: 0px;
height: 0px;
top: 315px;
left: 200px;
}
}
</style>
</head>
<body>
<section>
<div id="ball"></div>
<div id="shadow"></div>
</section>
</body>
</html>
