css3 来回跳_ease infinite-CSDN博客

本文链接：https://blog.csdn.net/fivestar2009/article/details/87450424

学习下css3 animation 与 transform

keyframe是动画无限执行 ease是圆滑 infinite是无限次

<!DOCTYPE html>
<html >

<head>
   <meta charset="UTF-8">
   <title>点扩散</title>
   <style>
       #circle
       {
           width:4px;
           height:4px;
           background-color:#ffffff;
           border-radius:50%;
           border:6px solid blue;
           position: relative;
           margin:100px;
       }
       #circle p,#circle span
       {
           position: absolute;
           width:4px;
           height:4px;
           border-radius:50%;

           box-shadow: 0px 0px 1px #009FD9;
           animation: halo 1.5s infinite;
           margin:0px;
           padding:0px;
       }

       #circle span
       {
           animation-delay:0.1s;
       }

       #circle #p1
       {
           animation-delay:0.2s;
       }


       #circle #span1
       {
           animation-delay:0.8s;
       }


       @keyframes halo
       {
           10% { transform:scale(1)}
           100% { transform:scale(8)}
       }

       #jump
       {
           width:4px;
           height:4px;
           background-color:#ffffff;
           border-radius:50%;
           border:6px solid blue;
           position: relative;
           margin-left:10px;
           animation:jumpDiv 1.5s ease infinite ;
           float:left
       }

       @keyframes jumpDiv
       {
           0%,100% { transform:translateY(0px)}

           50% { transform:translateY(30px)}

       }

       #stand
       {
           width:4px;
           height:4px;
           background-color:#ffffff;
           border-radius:50%;
           border:6px solid blue;
           position: relative;
           margin-left:10px;
           float:left;


       }

</style>

</head>

<body>

</body>

</html>

10% { transform:translateY(10px)}
           20% { transform:translateY(20px)}
           40% { transform:translateY(30px)}
           60% { transform:translateY(40px)}
           80% { transform:translateY(50px)}
           100% { transform:translateY(60px)} 本来是这样写的，可是只能一个方向跳动，后来在网上找了资料，就是下面的，也不行，后来想想一共是30px距离，那么 50%就应该是最高了，0% 和100%就是 0了，这样就对了

下面是网上的

    <title>WEB骇客DEMO - CSS animation 两种动画同时进行</title>


    <link rel="stylesheet" href="reset.css">

@-webkit-keyframes pulse {
0%, 100% {
background-color: red;
}
50% {
background-color: orange;
}
}

@keyframes pulse {
0%, 100% {
    background-color: red;
}
50% {
    background-color: orange;
}
}
@-webkit-keyframes nudge {
0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
}
50% {
    -webkit-transform: translate(150px, 0);
            transform: translate(150px, 0);
}
80% {
    -webkit-transform: translate(-150px, 0);
            transform: translate(-150px, 0);
}
}
@keyframes nudge {
0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
}
50% {
    -webkit-transform: translate(150px, 0);
            transform: translate(150px, 0);
}
80% {
    -webkit-transform: translate(-150px, 0);
            transform: translate(-150px, 0);
}
}
html, body {
height: 100%;
}

body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

</style>
</head>