小球动画效果演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation动画</title>
<!-- <script type="text/javascript" src='./bundle.js'></script> -->
<style>
.qq{
position:absolute;
left:0;
width:20px;
height:20px;
background:red;
border-radius: 50%;
animation: jump 5s ease-in-out 10s infinite alternate;
/* 第一个属性是动画名称, */
/* 第二个运动时间 */
/* 第三个animation-timing-function 动画运动曲线:linear匀速、 ease慢-快-慢(默认) */
/* 第四个animation-delay 延迟时间: */
/* 第五个动画重复次数。1次,2次,infinite无限次 */
/* 第六个动画是否往返运动。normal默认从头到尾,alternate头尾往返,reverse从尾到头 */
}
@keyframes jump {
0% {background:red;left:0px}
50% {background:rgba(200,100,60,0.6);left:100px;transform: scale(2);}
100% {background:rgba(114, 155, 233, 0.6);left:200px}
}
</style>
</head>
<body>
<div class='qq'>
</div>
</body>
</html>