SampleCode/CSS/Animation.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Animation</title>
    <style type="text/css">
    body {
        margin: 50px;
        text-align: center;
        position: relative;
        margin: ;
        100px 0;
    }

    .row {
        position: relative;
        margin: 10px;
        height: 155px;
        background: rgba(39, 139, 210, .1);
        border: 3px dashed rgba(39, 139, 210, 1);
    }
    .ball {
      width: 150px;
      height:150px;
      border: 3px solid black;
      background: rgba(139, 158, 67, 1);
      border-radius: 50%;
    }
    </style>
</head>

<body>
    <h1>动画 animation</h1>
    <div class="row">
      <div class="ball" id="ball1"></div>
    </div>
    <style type="text/css">
    #ball1 {
      animation: change-color 5s infinite;
      animation-name: change-color, change-position;
      position: relative;
      animation-direction: alternate;
    }

    @keyframes change-color {
      0% {background: red;}
      100% {background: yellow;}
    }
    @keyframes change-position {
      0% {left: 0;}
      100% {left: calc(100% - 150px);}
    }
    </style>
</body>

</html>