效果动画.gif
animation
- animation-name：动画名
- animation-duration：动画执行时间
- animation-interaction-count：1/2/.../infinate; 执行动画次数
- animation-fill-mode：forwards; 终止状态
- animation-direction：alternate; 动画结束后的执行方向
- 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;
/*终止状态*/
animation-fill-mode: forwards;
/*执行顺序：结束后反方向*/
animation-direction: alternate;
/*执行次数*/
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>
