Making a ball pass through a ring using css












10















I am trying to make something like this but the problem that i am facing in this is that the ball doesn't seem to passing through the ring but across the ring. Is there any solution to this. Please can help me out in this?



Here is my code.






body {
height: 50em;
}

.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9
}

@keyframes spinner {
0% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(180deg);
}
}

@keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
}
}

.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}

.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
}

.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}

<div class="ring"></div>
<div class="ball"></div>












share|improve this question









New contributor




zubaida farha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

























    10















    I am trying to make something like this but the problem that i am facing in this is that the ball doesn't seem to passing through the ring but across the ring. Is there any solution to this. Please can help me out in this?



    Here is my code.






    body {
    height: 50em;
    }

    .ring {
    position: relative;
    width: 200px;
    height: 100px;
    border-radius: 50%;
    border: 10px solid #ffcf82;
    z-index: 9
    }

    @keyframes spinner {
    0% {
    transform: rotateZ(0deg);
    }
    30% {
    transform: rotateZ(0deg);
    }
    60% {
    transform: rotateZ(180deg);
    }
    }

    @keyframes translate {
    0% {
    transform: translateY(0px);
    }
    50% {
    transform: translateY(-370px);
    }
    }

    .ring {
    animation-name: spinner;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    transform-style: preserve-3d;
    }

    .ball {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #14e78e;
    margin: 100px;
    }

    .ball {
    animation-name: translate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 8s;
    transform-style: preserve-3d;
    }

    <div class="ring"></div>
    <div class="ball"></div>












    share|improve this question









    New contributor




    zubaida farha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.























      10












      10








      10


      1






      I am trying to make something like this but the problem that i am facing in this is that the ball doesn't seem to passing through the ring but across the ring. Is there any solution to this. Please can help me out in this?



      Here is my code.






      body {
      height: 50em;
      }

      .ring {
      position: relative;
      width: 200px;
      height: 100px;
      border-radius: 50%;
      border: 10px solid #ffcf82;
      z-index: 9
      }

      @keyframes spinner {
      0% {
      transform: rotateZ(0deg);
      }
      30% {
      transform: rotateZ(0deg);
      }
      60% {
      transform: rotateZ(180deg);
      }
      }

      @keyframes translate {
      0% {
      transform: translateY(0px);
      }
      50% {
      transform: translateY(-370px);
      }
      }

      .ring {
      animation-name: spinner;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-duration: 5s;
      transform-style: preserve-3d;
      }

      .ball {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #14e78e;
      margin: 100px;
      }

      .ball {
      animation-name: translate;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-duration: 8s;
      transform-style: preserve-3d;
      }

      <div class="ring"></div>
      <div class="ball"></div>












      share|improve this question









      New contributor




      zubaida farha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.












      I am trying to make something like this but the problem that i am facing in this is that the ball doesn't seem to passing through the ring but across the ring. Is there any solution to this. Please can help me out in this?



      Here is my code.






      body {
      height: 50em;
      }

      .ring {
      position: relative;
      width: 200px;
      height: 100px;
      border-radius: 50%;
      border: 10px solid #ffcf82;
      z-index: 9
      }

      @keyframes spinner {
      0% {
      transform: rotateZ(0deg);
      }
      30% {
      transform: rotateZ(0deg);
      }
      60% {
      transform: rotateZ(180deg);
      }
      }

      @keyframes translate {
      0% {
      transform: translateY(0px);
      }
      50% {
      transform: translateY(-370px);
      }
      }

      .ring {
      animation-name: spinner;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-duration: 5s;
      transform-style: preserve-3d;
      }

      .ball {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #14e78e;
      margin: 100px;
      }

      .ball {
      animation-name: translate;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-duration: 8s;
      transform-style: preserve-3d;
      }

      <div class="ring"></div>
      <div class="ball"></div>








      body {
      height: 50em;
      }

      .ring {
      position: relative;
      width: 200px;
      height: 100px;
      border-radius: 50%;
      border: 10px solid #ffcf82;
      z-index: 9
      }

      @keyframes spinner {
      0% {
      transform: rotateZ(0deg);
      }
      30% {
      transform: rotateZ(0deg);
      }
      60% {
      transform: rotateZ(180deg);
      }
      }

      @keyframes translate {
      0% {
      transform: translateY(0px);
      }
      50% {
      transform: translateY(-370px);
      }
      }

      .ring {
      animation-name: spinner;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-duration: 5s;
      transform-style: preserve-3d;
      }

      .ball {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #14e78e;
      margin: 100px;
      }

      .ball {
      animation-name: translate;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-duration: 8s;
      transform-style: preserve-3d;
      }

      <div class="ring"></div>
      <div class="ball"></div>





      body {
      height: 50em;
      }

      .ring {
      position: relative;
      width: 200px;
      height: 100px;
      border-radius: 50%;
      border: 10px solid #ffcf82;
      z-index: 9
      }

      @keyframes spinner {
      0% {
      transform: rotateZ(0deg);
      }
      30% {
      transform: rotateZ(0deg);
      }
      60% {
      transform: rotateZ(180deg);
      }
      }

      @keyframes translate {
      0% {
      transform: translateY(0px);
      }
      50% {
      transform: translateY(-370px);
      }
      }

      .ring {
      animation-name: spinner;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-duration: 5s;
      transform-style: preserve-3d;
      }

      .ball {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #14e78e;
      margin: 100px;
      }

      .ball {
      animation-name: translate;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-duration: 8s;
      transform-style: preserve-3d;
      }

      <div class="ring"></div>
      <div class="ball"></div>






      html css css3 css-animations css-transforms






      share|improve this question









      New contributor




      zubaida farha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question









      New contributor




      zubaida farha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question








      edited 12 hours ago









      Temani Afif

      76.8k94490




      76.8k94490






      New contributor




      zubaida farha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 15 hours ago









      zubaida farhazubaida farha

      514




      514




      New contributor




      zubaida farha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      zubaida farha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      zubaida farha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.
























          3 Answers
          3






          active

          oldest

          votes


















          8














          You can try to change z-index of ball inside of animation






          body {
          height: 50em;
          }

          .ring {
          position: relative;
          width: 200px;
          height: 100px;
          border-radius: 50%;
          border: 10px solid #ffcf82;
          z-index: 9
          }

          @keyframes spinner {
          0% {
          transform: rotateZ(0deg);
          }
          30% {
          transform: rotateZ(0deg);
          }
          60% {
          transform: rotateZ(180deg);
          }
          }

          @keyframes translate {
          0% {
          transform: translateY(0px);
          }
          50% {
          transform: translateY(-370px);
          z-index: 10;
          }
          }

          .ring {
          animation-name: spinner;
          animation-timing-function: ease-in-out;
          animation-iteration-count: infinite;
          animation-duration: 5s;
          transform-style: preserve-3d;
          }

          .ball {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: #14e78e;
          margin: 100px;
          position: relative;
          }

          .ball {
          animation-name: translate;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          animation-duration: 8s;
          transform-style: preserve-3d;
          }

          <div class="ring"></div>
          <div class="ball"></div>








          share|improve this answer































            6














            I would create the ring using two elements (the bottom and the top part) to be able to adjust the z-index of each one differently:






            .ring {
            margin-top:80px;
            position: relative;
            width: 200px;
            height: 100px;
            }
            .ring:before,
            .ring:after{
            content:"";
            position:absolute;
            left:0;
            right:0;
            height:100%;
            border: 10px solid #ffcf82;
            border-radius:50%;
            box-sizing:border-box;
            }
            .ring:before {
            z-index:-1;
            clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
            }
            .ring:after {
            z-index:1;
            clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
            }

            @keyframes spinner {
            0%,50% {
            transform: rotate(0deg);
            }
            100% {
            transform: rotate(-180deg);
            }
            }

            @keyframes translate {
            0% {
            transform: translateY(0px);
            }
            50% {
            transform: translateY(-300px);
            }
            }

            .ring:before,
            .ring:after{
            animation: spinner infinite alternate 4s;
            }

            .ball {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #14e78e;
            margin: 60px 80px;
            position:relative;
            z-index:0;
            animation: translate 8s infinite linear;
            }

            <div class="ring"></div>
            <div class="ball"></div>





            Another idea in case you need better support than clip-path. The trick is to play with transparent color:






            .ring {
            margin-top:80px;
            position: relative;
            width: 200px;
            height: 100px;
            }
            .ring:before,
            .ring:after{
            content:"";
            position:absolute;
            left:0;
            right:0;
            height:100%;
            border: 10px solid #ffcf82;
            border-radius:50%;
            box-sizing:border-box;
            }
            .ring:before {
            z-index:-1;
            }
            .ring:after {
            z-index:1;
            border-bottom-color:transparent;
            border-right-color:transparent;
            }

            @keyframes spinner {
            0%,50% {
            transform: rotate(0deg);
            }
            100% {
            transform: rotate(-180deg);
            }
            }

            @keyframes translate {
            0% {
            transform: translateY(10px);
            }
            50% {
            transform: translateY(-310px);
            }
            }

            .ring:before,
            .ring:after{
            animation: spinner infinite alternate 4s;
            }

            .ball {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #14e78e;
            margin: 60px 80px;
            position:relative;
            z-index:0;
            animation: translate 8s infinite linear;
            }

            <div class="ring"></div>
            <div class="ball"></div>








            share|improve this answer

































              0














              You can use a 3d transform to get automatically this effect.



              Rotate the circle in the X axis. Then, there is one part of it that is behind the plane, and another part that is in front of it. The ball is still in the 0 z plane, so it will naturally appear to cross through the circle:






              body {
              height: 50em;
              transform-style: preserve-3d;
              }

              .ring {
              position: relative;
              width: 200px;
              height: 100px;
              border-radius: 50%;
              border: 10px solid #ffcf82;
              z-index: 9;
              margin-top: 100px;
              transform: rotateX(50deg) rotateY(0deg) ;
              transform-style: preserve-3d;
              }

              @keyframes spinner {
              0%, 30% {
              transform: rotateX(50deg) rotateY(0deg);
              }
              60%, 100% {
              transform: rotateX(50deg) rotateY(180deg);
              }
              }

              @keyframes translate {
              0% {
              transform: translateY(0px);
              }
              50% {
              transform: translateY(-370px);
              }
              }

              .ring {
              animation-name: spinner;
              animation-timing-function: ease-in-out;
              animation-iteration-count: infinite;
              animation-duration: 5s;
              transform-style: preserve-3d;
              }

              .ball {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              background: #14e78e;
              margin: 100px;
              }

              .ball {
              animation-name: translate;
              animation-timing-function: linear;
              animation-iteration-count: infinite;
              animation-duration: 8s;
              transform-style: preserve-3d;
              }

              <div class="ring"></div>
              <div class="ball"></div>








              share|improve this answer























                Your Answer






                StackExchange.ifUsing("editor", function () {
                StackExchange.using("externalEditor", function () {
                StackExchange.using("snippets", function () {
                StackExchange.snippets.init();
                });
                });
                }, "code-snippets");

                StackExchange.ready(function() {
                var channelOptions = {
                tags: "".split(" "),
                id: "1"
                };
                initTagRenderer("".split(" "), "".split(" "), channelOptions);

                StackExchange.using("externalEditor", function() {
                // Have to fire editor after snippets, if snippets enabled
                if (StackExchange.settings.snippets.snippetsEnabled) {
                StackExchange.using("snippets", function() {
                createEditor();
                });
                }
                else {
                createEditor();
                }
                });

                function createEditor() {
                StackExchange.prepareEditor({
                heartbeatType: 'answer',
                autoActivateHeartbeat: false,
                convertImagesToLinks: true,
                noModals: true,
                showLowRepImageUploadWarning: true,
                reputationToPostImages: 10,
                bindNavPrevention: true,
                postfix: "",
                imageUploader: {
                brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                allowUrls: true
                },
                onDemand: true,
                discardSelector: ".discard-answer"
                ,immediatelyShowMarkdownHelp:true
                });


                }
                });






                zubaida farha is a new contributor. Be nice, and check out our Code of Conduct.










                draft saved

                draft discarded


















                StackExchange.ready(
                function () {
                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54979433%2fmaking-a-ball-pass-through-a-ring-using-css%23new-answer', 'question_page');
                }
                );

                Post as a guest















                Required, but never shown

























                3 Answers
                3






                active

                oldest

                votes








                3 Answers
                3






                active

                oldest

                votes









                active

                oldest

                votes






                active

                oldest

                votes









                8














                You can try to change z-index of ball inside of animation






                body {
                height: 50em;
                }

                .ring {
                position: relative;
                width: 200px;
                height: 100px;
                border-radius: 50%;
                border: 10px solid #ffcf82;
                z-index: 9
                }

                @keyframes spinner {
                0% {
                transform: rotateZ(0deg);
                }
                30% {
                transform: rotateZ(0deg);
                }
                60% {
                transform: rotateZ(180deg);
                }
                }

                @keyframes translate {
                0% {
                transform: translateY(0px);
                }
                50% {
                transform: translateY(-370px);
                z-index: 10;
                }
                }

                .ring {
                animation-name: spinner;
                animation-timing-function: ease-in-out;
                animation-iteration-count: infinite;
                animation-duration: 5s;
                transform-style: preserve-3d;
                }

                .ball {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background: #14e78e;
                margin: 100px;
                position: relative;
                }

                .ball {
                animation-name: translate;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
                animation-duration: 8s;
                transform-style: preserve-3d;
                }

                <div class="ring"></div>
                <div class="ball"></div>








                share|improve this answer




























                  8














                  You can try to change z-index of ball inside of animation






                  body {
                  height: 50em;
                  }

                  .ring {
                  position: relative;
                  width: 200px;
                  height: 100px;
                  border-radius: 50%;
                  border: 10px solid #ffcf82;
                  z-index: 9
                  }

                  @keyframes spinner {
                  0% {
                  transform: rotateZ(0deg);
                  }
                  30% {
                  transform: rotateZ(0deg);
                  }
                  60% {
                  transform: rotateZ(180deg);
                  }
                  }

                  @keyframes translate {
                  0% {
                  transform: translateY(0px);
                  }
                  50% {
                  transform: translateY(-370px);
                  z-index: 10;
                  }
                  }

                  .ring {
                  animation-name: spinner;
                  animation-timing-function: ease-in-out;
                  animation-iteration-count: infinite;
                  animation-duration: 5s;
                  transform-style: preserve-3d;
                  }

                  .ball {
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  background: #14e78e;
                  margin: 100px;
                  position: relative;
                  }

                  .ball {
                  animation-name: translate;
                  animation-timing-function: linear;
                  animation-iteration-count: infinite;
                  animation-duration: 8s;
                  transform-style: preserve-3d;
                  }

                  <div class="ring"></div>
                  <div class="ball"></div>








                  share|improve this answer


























                    8












                    8








                    8







                    You can try to change z-index of ball inside of animation






                    body {
                    height: 50em;
                    }

                    .ring {
                    position: relative;
                    width: 200px;
                    height: 100px;
                    border-radius: 50%;
                    border: 10px solid #ffcf82;
                    z-index: 9
                    }

                    @keyframes spinner {
                    0% {
                    transform: rotateZ(0deg);
                    }
                    30% {
                    transform: rotateZ(0deg);
                    }
                    60% {
                    transform: rotateZ(180deg);
                    }
                    }

                    @keyframes translate {
                    0% {
                    transform: translateY(0px);
                    }
                    50% {
                    transform: translateY(-370px);
                    z-index: 10;
                    }
                    }

                    .ring {
                    animation-name: spinner;
                    animation-timing-function: ease-in-out;
                    animation-iteration-count: infinite;
                    animation-duration: 5s;
                    transform-style: preserve-3d;
                    }

                    .ball {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background: #14e78e;
                    margin: 100px;
                    position: relative;
                    }

                    .ball {
                    animation-name: translate;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                    animation-duration: 8s;
                    transform-style: preserve-3d;
                    }

                    <div class="ring"></div>
                    <div class="ball"></div>








                    share|improve this answer













                    You can try to change z-index of ball inside of animation






                    body {
                    height: 50em;
                    }

                    .ring {
                    position: relative;
                    width: 200px;
                    height: 100px;
                    border-radius: 50%;
                    border: 10px solid #ffcf82;
                    z-index: 9
                    }

                    @keyframes spinner {
                    0% {
                    transform: rotateZ(0deg);
                    }
                    30% {
                    transform: rotateZ(0deg);
                    }
                    60% {
                    transform: rotateZ(180deg);
                    }
                    }

                    @keyframes translate {
                    0% {
                    transform: translateY(0px);
                    }
                    50% {
                    transform: translateY(-370px);
                    z-index: 10;
                    }
                    }

                    .ring {
                    animation-name: spinner;
                    animation-timing-function: ease-in-out;
                    animation-iteration-count: infinite;
                    animation-duration: 5s;
                    transform-style: preserve-3d;
                    }

                    .ball {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background: #14e78e;
                    margin: 100px;
                    position: relative;
                    }

                    .ball {
                    animation-name: translate;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                    animation-duration: 8s;
                    transform-style: preserve-3d;
                    }

                    <div class="ring"></div>
                    <div class="ball"></div>








                    body {
                    height: 50em;
                    }

                    .ring {
                    position: relative;
                    width: 200px;
                    height: 100px;
                    border-radius: 50%;
                    border: 10px solid #ffcf82;
                    z-index: 9
                    }

                    @keyframes spinner {
                    0% {
                    transform: rotateZ(0deg);
                    }
                    30% {
                    transform: rotateZ(0deg);
                    }
                    60% {
                    transform: rotateZ(180deg);
                    }
                    }

                    @keyframes translate {
                    0% {
                    transform: translateY(0px);
                    }
                    50% {
                    transform: translateY(-370px);
                    z-index: 10;
                    }
                    }

                    .ring {
                    animation-name: spinner;
                    animation-timing-function: ease-in-out;
                    animation-iteration-count: infinite;
                    animation-duration: 5s;
                    transform-style: preserve-3d;
                    }

                    .ball {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background: #14e78e;
                    margin: 100px;
                    position: relative;
                    }

                    .ball {
                    animation-name: translate;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                    animation-duration: 8s;
                    transform-style: preserve-3d;
                    }

                    <div class="ring"></div>
                    <div class="ball"></div>





                    body {
                    height: 50em;
                    }

                    .ring {
                    position: relative;
                    width: 200px;
                    height: 100px;
                    border-radius: 50%;
                    border: 10px solid #ffcf82;
                    z-index: 9
                    }

                    @keyframes spinner {
                    0% {
                    transform: rotateZ(0deg);
                    }
                    30% {
                    transform: rotateZ(0deg);
                    }
                    60% {
                    transform: rotateZ(180deg);
                    }
                    }

                    @keyframes translate {
                    0% {
                    transform: translateY(0px);
                    }
                    50% {
                    transform: translateY(-370px);
                    z-index: 10;
                    }
                    }

                    .ring {
                    animation-name: spinner;
                    animation-timing-function: ease-in-out;
                    animation-iteration-count: infinite;
                    animation-duration: 5s;
                    transform-style: preserve-3d;
                    }

                    .ball {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background: #14e78e;
                    margin: 100px;
                    position: relative;
                    }

                    .ball {
                    animation-name: translate;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                    animation-duration: 8s;
                    transform-style: preserve-3d;
                    }

                    <div class="ring"></div>
                    <div class="ball"></div>






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered 15 hours ago









                    SolonkaSolonka

                    353111




                    353111

























                        6














                        I would create the ring using two elements (the bottom and the top part) to be able to adjust the z-index of each one differently:






                        .ring {
                        margin-top:80px;
                        position: relative;
                        width: 200px;
                        height: 100px;
                        }
                        .ring:before,
                        .ring:after{
                        content:"";
                        position:absolute;
                        left:0;
                        right:0;
                        height:100%;
                        border: 10px solid #ffcf82;
                        border-radius:50%;
                        box-sizing:border-box;
                        }
                        .ring:before {
                        z-index:-1;
                        clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
                        }
                        .ring:after {
                        z-index:1;
                        clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
                        }

                        @keyframes spinner {
                        0%,50% {
                        transform: rotate(0deg);
                        }
                        100% {
                        transform: rotate(-180deg);
                        }
                        }

                        @keyframes translate {
                        0% {
                        transform: translateY(0px);
                        }
                        50% {
                        transform: translateY(-300px);
                        }
                        }

                        .ring:before,
                        .ring:after{
                        animation: spinner infinite alternate 4s;
                        }

                        .ball {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        background: #14e78e;
                        margin: 60px 80px;
                        position:relative;
                        z-index:0;
                        animation: translate 8s infinite linear;
                        }

                        <div class="ring"></div>
                        <div class="ball"></div>





                        Another idea in case you need better support than clip-path. The trick is to play with transparent color:






                        .ring {
                        margin-top:80px;
                        position: relative;
                        width: 200px;
                        height: 100px;
                        }
                        .ring:before,
                        .ring:after{
                        content:"";
                        position:absolute;
                        left:0;
                        right:0;
                        height:100%;
                        border: 10px solid #ffcf82;
                        border-radius:50%;
                        box-sizing:border-box;
                        }
                        .ring:before {
                        z-index:-1;
                        }
                        .ring:after {
                        z-index:1;
                        border-bottom-color:transparent;
                        border-right-color:transparent;
                        }

                        @keyframes spinner {
                        0%,50% {
                        transform: rotate(0deg);
                        }
                        100% {
                        transform: rotate(-180deg);
                        }
                        }

                        @keyframes translate {
                        0% {
                        transform: translateY(10px);
                        }
                        50% {
                        transform: translateY(-310px);
                        }
                        }

                        .ring:before,
                        .ring:after{
                        animation: spinner infinite alternate 4s;
                        }

                        .ball {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        background: #14e78e;
                        margin: 60px 80px;
                        position:relative;
                        z-index:0;
                        animation: translate 8s infinite linear;
                        }

                        <div class="ring"></div>
                        <div class="ball"></div>








                        share|improve this answer






























                          6














                          I would create the ring using two elements (the bottom and the top part) to be able to adjust the z-index of each one differently:






                          .ring {
                          margin-top:80px;
                          position: relative;
                          width: 200px;
                          height: 100px;
                          }
                          .ring:before,
                          .ring:after{
                          content:"";
                          position:absolute;
                          left:0;
                          right:0;
                          height:100%;
                          border: 10px solid #ffcf82;
                          border-radius:50%;
                          box-sizing:border-box;
                          }
                          .ring:before {
                          z-index:-1;
                          clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
                          }
                          .ring:after {
                          z-index:1;
                          clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
                          }

                          @keyframes spinner {
                          0%,50% {
                          transform: rotate(0deg);
                          }
                          100% {
                          transform: rotate(-180deg);
                          }
                          }

                          @keyframes translate {
                          0% {
                          transform: translateY(0px);
                          }
                          50% {
                          transform: translateY(-300px);
                          }
                          }

                          .ring:before,
                          .ring:after{
                          animation: spinner infinite alternate 4s;
                          }

                          .ball {
                          width: 50px;
                          height: 50px;
                          border-radius: 50%;
                          background: #14e78e;
                          margin: 60px 80px;
                          position:relative;
                          z-index:0;
                          animation: translate 8s infinite linear;
                          }

                          <div class="ring"></div>
                          <div class="ball"></div>





                          Another idea in case you need better support than clip-path. The trick is to play with transparent color:






                          .ring {
                          margin-top:80px;
                          position: relative;
                          width: 200px;
                          height: 100px;
                          }
                          .ring:before,
                          .ring:after{
                          content:"";
                          position:absolute;
                          left:0;
                          right:0;
                          height:100%;
                          border: 10px solid #ffcf82;
                          border-radius:50%;
                          box-sizing:border-box;
                          }
                          .ring:before {
                          z-index:-1;
                          }
                          .ring:after {
                          z-index:1;
                          border-bottom-color:transparent;
                          border-right-color:transparent;
                          }

                          @keyframes spinner {
                          0%,50% {
                          transform: rotate(0deg);
                          }
                          100% {
                          transform: rotate(-180deg);
                          }
                          }

                          @keyframes translate {
                          0% {
                          transform: translateY(10px);
                          }
                          50% {
                          transform: translateY(-310px);
                          }
                          }

                          .ring:before,
                          .ring:after{
                          animation: spinner infinite alternate 4s;
                          }

                          .ball {
                          width: 50px;
                          height: 50px;
                          border-radius: 50%;
                          background: #14e78e;
                          margin: 60px 80px;
                          position:relative;
                          z-index:0;
                          animation: translate 8s infinite linear;
                          }

                          <div class="ring"></div>
                          <div class="ball"></div>








                          share|improve this answer




























                            6












                            6








                            6







                            I would create the ring using two elements (the bottom and the top part) to be able to adjust the z-index of each one differently:






                            .ring {
                            margin-top:80px;
                            position: relative;
                            width: 200px;
                            height: 100px;
                            }
                            .ring:before,
                            .ring:after{
                            content:"";
                            position:absolute;
                            left:0;
                            right:0;
                            height:100%;
                            border: 10px solid #ffcf82;
                            border-radius:50%;
                            box-sizing:border-box;
                            }
                            .ring:before {
                            z-index:-1;
                            clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
                            }
                            .ring:after {
                            z-index:1;
                            clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
                            }

                            @keyframes spinner {
                            0%,50% {
                            transform: rotate(0deg);
                            }
                            100% {
                            transform: rotate(-180deg);
                            }
                            }

                            @keyframes translate {
                            0% {
                            transform: translateY(0px);
                            }
                            50% {
                            transform: translateY(-300px);
                            }
                            }

                            .ring:before,
                            .ring:after{
                            animation: spinner infinite alternate 4s;
                            }

                            .ball {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            background: #14e78e;
                            margin: 60px 80px;
                            position:relative;
                            z-index:0;
                            animation: translate 8s infinite linear;
                            }

                            <div class="ring"></div>
                            <div class="ball"></div>





                            Another idea in case you need better support than clip-path. The trick is to play with transparent color:






                            .ring {
                            margin-top:80px;
                            position: relative;
                            width: 200px;
                            height: 100px;
                            }
                            .ring:before,
                            .ring:after{
                            content:"";
                            position:absolute;
                            left:0;
                            right:0;
                            height:100%;
                            border: 10px solid #ffcf82;
                            border-radius:50%;
                            box-sizing:border-box;
                            }
                            .ring:before {
                            z-index:-1;
                            }
                            .ring:after {
                            z-index:1;
                            border-bottom-color:transparent;
                            border-right-color:transparent;
                            }

                            @keyframes spinner {
                            0%,50% {
                            transform: rotate(0deg);
                            }
                            100% {
                            transform: rotate(-180deg);
                            }
                            }

                            @keyframes translate {
                            0% {
                            transform: translateY(10px);
                            }
                            50% {
                            transform: translateY(-310px);
                            }
                            }

                            .ring:before,
                            .ring:after{
                            animation: spinner infinite alternate 4s;
                            }

                            .ball {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            background: #14e78e;
                            margin: 60px 80px;
                            position:relative;
                            z-index:0;
                            animation: translate 8s infinite linear;
                            }

                            <div class="ring"></div>
                            <div class="ball"></div>








                            share|improve this answer















                            I would create the ring using two elements (the bottom and the top part) to be able to adjust the z-index of each one differently:






                            .ring {
                            margin-top:80px;
                            position: relative;
                            width: 200px;
                            height: 100px;
                            }
                            .ring:before,
                            .ring:after{
                            content:"";
                            position:absolute;
                            left:0;
                            right:0;
                            height:100%;
                            border: 10px solid #ffcf82;
                            border-radius:50%;
                            box-sizing:border-box;
                            }
                            .ring:before {
                            z-index:-1;
                            clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
                            }
                            .ring:after {
                            z-index:1;
                            clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
                            }

                            @keyframes spinner {
                            0%,50% {
                            transform: rotate(0deg);
                            }
                            100% {
                            transform: rotate(-180deg);
                            }
                            }

                            @keyframes translate {
                            0% {
                            transform: translateY(0px);
                            }
                            50% {
                            transform: translateY(-300px);
                            }
                            }

                            .ring:before,
                            .ring:after{
                            animation: spinner infinite alternate 4s;
                            }

                            .ball {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            background: #14e78e;
                            margin: 60px 80px;
                            position:relative;
                            z-index:0;
                            animation: translate 8s infinite linear;
                            }

                            <div class="ring"></div>
                            <div class="ball"></div>





                            Another idea in case you need better support than clip-path. The trick is to play with transparent color:






                            .ring {
                            margin-top:80px;
                            position: relative;
                            width: 200px;
                            height: 100px;
                            }
                            .ring:before,
                            .ring:after{
                            content:"";
                            position:absolute;
                            left:0;
                            right:0;
                            height:100%;
                            border: 10px solid #ffcf82;
                            border-radius:50%;
                            box-sizing:border-box;
                            }
                            .ring:before {
                            z-index:-1;
                            }
                            .ring:after {
                            z-index:1;
                            border-bottom-color:transparent;
                            border-right-color:transparent;
                            }

                            @keyframes spinner {
                            0%,50% {
                            transform: rotate(0deg);
                            }
                            100% {
                            transform: rotate(-180deg);
                            }
                            }

                            @keyframes translate {
                            0% {
                            transform: translateY(10px);
                            }
                            50% {
                            transform: translateY(-310px);
                            }
                            }

                            .ring:before,
                            .ring:after{
                            animation: spinner infinite alternate 4s;
                            }

                            .ball {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            background: #14e78e;
                            margin: 60px 80px;
                            position:relative;
                            z-index:0;
                            animation: translate 8s infinite linear;
                            }

                            <div class="ring"></div>
                            <div class="ball"></div>








                            .ring {
                            margin-top:80px;
                            position: relative;
                            width: 200px;
                            height: 100px;
                            }
                            .ring:before,
                            .ring:after{
                            content:"";
                            position:absolute;
                            left:0;
                            right:0;
                            height:100%;
                            border: 10px solid #ffcf82;
                            border-radius:50%;
                            box-sizing:border-box;
                            }
                            .ring:before {
                            z-index:-1;
                            clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
                            }
                            .ring:after {
                            z-index:1;
                            clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
                            }

                            @keyframes spinner {
                            0%,50% {
                            transform: rotate(0deg);
                            }
                            100% {
                            transform: rotate(-180deg);
                            }
                            }

                            @keyframes translate {
                            0% {
                            transform: translateY(0px);
                            }
                            50% {
                            transform: translateY(-300px);
                            }
                            }

                            .ring:before,
                            .ring:after{
                            animation: spinner infinite alternate 4s;
                            }

                            .ball {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            background: #14e78e;
                            margin: 60px 80px;
                            position:relative;
                            z-index:0;
                            animation: translate 8s infinite linear;
                            }

                            <div class="ring"></div>
                            <div class="ball"></div>





                            .ring {
                            margin-top:80px;
                            position: relative;
                            width: 200px;
                            height: 100px;
                            }
                            .ring:before,
                            .ring:after{
                            content:"";
                            position:absolute;
                            left:0;
                            right:0;
                            height:100%;
                            border: 10px solid #ffcf82;
                            border-radius:50%;
                            box-sizing:border-box;
                            }
                            .ring:before {
                            z-index:-1;
                            clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
                            }
                            .ring:after {
                            z-index:1;
                            clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
                            }

                            @keyframes spinner {
                            0%,50% {
                            transform: rotate(0deg);
                            }
                            100% {
                            transform: rotate(-180deg);
                            }
                            }

                            @keyframes translate {
                            0% {
                            transform: translateY(0px);
                            }
                            50% {
                            transform: translateY(-300px);
                            }
                            }

                            .ring:before,
                            .ring:after{
                            animation: spinner infinite alternate 4s;
                            }

                            .ball {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            background: #14e78e;
                            margin: 60px 80px;
                            position:relative;
                            z-index:0;
                            animation: translate 8s infinite linear;
                            }

                            <div class="ring"></div>
                            <div class="ball"></div>





                            .ring {
                            margin-top:80px;
                            position: relative;
                            width: 200px;
                            height: 100px;
                            }
                            .ring:before,
                            .ring:after{
                            content:"";
                            position:absolute;
                            left:0;
                            right:0;
                            height:100%;
                            border: 10px solid #ffcf82;
                            border-radius:50%;
                            box-sizing:border-box;
                            }
                            .ring:before {
                            z-index:-1;
                            }
                            .ring:after {
                            z-index:1;
                            border-bottom-color:transparent;
                            border-right-color:transparent;
                            }

                            @keyframes spinner {
                            0%,50% {
                            transform: rotate(0deg);
                            }
                            100% {
                            transform: rotate(-180deg);
                            }
                            }

                            @keyframes translate {
                            0% {
                            transform: translateY(10px);
                            }
                            50% {
                            transform: translateY(-310px);
                            }
                            }

                            .ring:before,
                            .ring:after{
                            animation: spinner infinite alternate 4s;
                            }

                            .ball {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            background: #14e78e;
                            margin: 60px 80px;
                            position:relative;
                            z-index:0;
                            animation: translate 8s infinite linear;
                            }

                            <div class="ring"></div>
                            <div class="ball"></div>





                            .ring {
                            margin-top:80px;
                            position: relative;
                            width: 200px;
                            height: 100px;
                            }
                            .ring:before,
                            .ring:after{
                            content:"";
                            position:absolute;
                            left:0;
                            right:0;
                            height:100%;
                            border: 10px solid #ffcf82;
                            border-radius:50%;
                            box-sizing:border-box;
                            }
                            .ring:before {
                            z-index:-1;
                            }
                            .ring:after {
                            z-index:1;
                            border-bottom-color:transparent;
                            border-right-color:transparent;
                            }

                            @keyframes spinner {
                            0%,50% {
                            transform: rotate(0deg);
                            }
                            100% {
                            transform: rotate(-180deg);
                            }
                            }

                            @keyframes translate {
                            0% {
                            transform: translateY(10px);
                            }
                            50% {
                            transform: translateY(-310px);
                            }
                            }

                            .ring:before,
                            .ring:after{
                            animation: spinner infinite alternate 4s;
                            }

                            .ball {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            background: #14e78e;
                            margin: 60px 80px;
                            position:relative;
                            z-index:0;
                            animation: translate 8s infinite linear;
                            }

                            <div class="ring"></div>
                            <div class="ball"></div>






                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            edited 7 hours ago

























                            answered 15 hours ago









                            Temani AfifTemani Afif

                            76.8k94490




                            76.8k94490























                                0














                                You can use a 3d transform to get automatically this effect.



                                Rotate the circle in the X axis. Then, there is one part of it that is behind the plane, and another part that is in front of it. The ball is still in the 0 z plane, so it will naturally appear to cross through the circle:






                                body {
                                height: 50em;
                                transform-style: preserve-3d;
                                }

                                .ring {
                                position: relative;
                                width: 200px;
                                height: 100px;
                                border-radius: 50%;
                                border: 10px solid #ffcf82;
                                z-index: 9;
                                margin-top: 100px;
                                transform: rotateX(50deg) rotateY(0deg) ;
                                transform-style: preserve-3d;
                                }

                                @keyframes spinner {
                                0%, 30% {
                                transform: rotateX(50deg) rotateY(0deg);
                                }
                                60%, 100% {
                                transform: rotateX(50deg) rotateY(180deg);
                                }
                                }

                                @keyframes translate {
                                0% {
                                transform: translateY(0px);
                                }
                                50% {
                                transform: translateY(-370px);
                                }
                                }

                                .ring {
                                animation-name: spinner;
                                animation-timing-function: ease-in-out;
                                animation-iteration-count: infinite;
                                animation-duration: 5s;
                                transform-style: preserve-3d;
                                }

                                .ball {
                                width: 50px;
                                height: 50px;
                                border-radius: 50%;
                                background: #14e78e;
                                margin: 100px;
                                }

                                .ball {
                                animation-name: translate;
                                animation-timing-function: linear;
                                animation-iteration-count: infinite;
                                animation-duration: 8s;
                                transform-style: preserve-3d;
                                }

                                <div class="ring"></div>
                                <div class="ball"></div>








                                share|improve this answer




























                                  0














                                  You can use a 3d transform to get automatically this effect.



                                  Rotate the circle in the X axis. Then, there is one part of it that is behind the plane, and another part that is in front of it. The ball is still in the 0 z plane, so it will naturally appear to cross through the circle:






                                  body {
                                  height: 50em;
                                  transform-style: preserve-3d;
                                  }

                                  .ring {
                                  position: relative;
                                  width: 200px;
                                  height: 100px;
                                  border-radius: 50%;
                                  border: 10px solid #ffcf82;
                                  z-index: 9;
                                  margin-top: 100px;
                                  transform: rotateX(50deg) rotateY(0deg) ;
                                  transform-style: preserve-3d;
                                  }

                                  @keyframes spinner {
                                  0%, 30% {
                                  transform: rotateX(50deg) rotateY(0deg);
                                  }
                                  60%, 100% {
                                  transform: rotateX(50deg) rotateY(180deg);
                                  }
                                  }

                                  @keyframes translate {
                                  0% {
                                  transform: translateY(0px);
                                  }
                                  50% {
                                  transform: translateY(-370px);
                                  }
                                  }

                                  .ring {
                                  animation-name: spinner;
                                  animation-timing-function: ease-in-out;
                                  animation-iteration-count: infinite;
                                  animation-duration: 5s;
                                  transform-style: preserve-3d;
                                  }

                                  .ball {
                                  width: 50px;
                                  height: 50px;
                                  border-radius: 50%;
                                  background: #14e78e;
                                  margin: 100px;
                                  }

                                  .ball {
                                  animation-name: translate;
                                  animation-timing-function: linear;
                                  animation-iteration-count: infinite;
                                  animation-duration: 8s;
                                  transform-style: preserve-3d;
                                  }

                                  <div class="ring"></div>
                                  <div class="ball"></div>








                                  share|improve this answer


























                                    0












                                    0








                                    0







                                    You can use a 3d transform to get automatically this effect.



                                    Rotate the circle in the X axis. Then, there is one part of it that is behind the plane, and another part that is in front of it. The ball is still in the 0 z plane, so it will naturally appear to cross through the circle:






                                    body {
                                    height: 50em;
                                    transform-style: preserve-3d;
                                    }

                                    .ring {
                                    position: relative;
                                    width: 200px;
                                    height: 100px;
                                    border-radius: 50%;
                                    border: 10px solid #ffcf82;
                                    z-index: 9;
                                    margin-top: 100px;
                                    transform: rotateX(50deg) rotateY(0deg) ;
                                    transform-style: preserve-3d;
                                    }

                                    @keyframes spinner {
                                    0%, 30% {
                                    transform: rotateX(50deg) rotateY(0deg);
                                    }
                                    60%, 100% {
                                    transform: rotateX(50deg) rotateY(180deg);
                                    }
                                    }

                                    @keyframes translate {
                                    0% {
                                    transform: translateY(0px);
                                    }
                                    50% {
                                    transform: translateY(-370px);
                                    }
                                    }

                                    .ring {
                                    animation-name: spinner;
                                    animation-timing-function: ease-in-out;
                                    animation-iteration-count: infinite;
                                    animation-duration: 5s;
                                    transform-style: preserve-3d;
                                    }

                                    .ball {
                                    width: 50px;
                                    height: 50px;
                                    border-radius: 50%;
                                    background: #14e78e;
                                    margin: 100px;
                                    }

                                    .ball {
                                    animation-name: translate;
                                    animation-timing-function: linear;
                                    animation-iteration-count: infinite;
                                    animation-duration: 8s;
                                    transform-style: preserve-3d;
                                    }

                                    <div class="ring"></div>
                                    <div class="ball"></div>








                                    share|improve this answer













                                    You can use a 3d transform to get automatically this effect.



                                    Rotate the circle in the X axis. Then, there is one part of it that is behind the plane, and another part that is in front of it. The ball is still in the 0 z plane, so it will naturally appear to cross through the circle:






                                    body {
                                    height: 50em;
                                    transform-style: preserve-3d;
                                    }

                                    .ring {
                                    position: relative;
                                    width: 200px;
                                    height: 100px;
                                    border-radius: 50%;
                                    border: 10px solid #ffcf82;
                                    z-index: 9;
                                    margin-top: 100px;
                                    transform: rotateX(50deg) rotateY(0deg) ;
                                    transform-style: preserve-3d;
                                    }

                                    @keyframes spinner {
                                    0%, 30% {
                                    transform: rotateX(50deg) rotateY(0deg);
                                    }
                                    60%, 100% {
                                    transform: rotateX(50deg) rotateY(180deg);
                                    }
                                    }

                                    @keyframes translate {
                                    0% {
                                    transform: translateY(0px);
                                    }
                                    50% {
                                    transform: translateY(-370px);
                                    }
                                    }

                                    .ring {
                                    animation-name: spinner;
                                    animation-timing-function: ease-in-out;
                                    animation-iteration-count: infinite;
                                    animation-duration: 5s;
                                    transform-style: preserve-3d;
                                    }

                                    .ball {
                                    width: 50px;
                                    height: 50px;
                                    border-radius: 50%;
                                    background: #14e78e;
                                    margin: 100px;
                                    }

                                    .ball {
                                    animation-name: translate;
                                    animation-timing-function: linear;
                                    animation-iteration-count: infinite;
                                    animation-duration: 8s;
                                    transform-style: preserve-3d;
                                    }

                                    <div class="ring"></div>
                                    <div class="ball"></div>








                                    body {
                                    height: 50em;
                                    transform-style: preserve-3d;
                                    }

                                    .ring {
                                    position: relative;
                                    width: 200px;
                                    height: 100px;
                                    border-radius: 50%;
                                    border: 10px solid #ffcf82;
                                    z-index: 9;
                                    margin-top: 100px;
                                    transform: rotateX(50deg) rotateY(0deg) ;
                                    transform-style: preserve-3d;
                                    }

                                    @keyframes spinner {
                                    0%, 30% {
                                    transform: rotateX(50deg) rotateY(0deg);
                                    }
                                    60%, 100% {
                                    transform: rotateX(50deg) rotateY(180deg);
                                    }
                                    }

                                    @keyframes translate {
                                    0% {
                                    transform: translateY(0px);
                                    }
                                    50% {
                                    transform: translateY(-370px);
                                    }
                                    }

                                    .ring {
                                    animation-name: spinner;
                                    animation-timing-function: ease-in-out;
                                    animation-iteration-count: infinite;
                                    animation-duration: 5s;
                                    transform-style: preserve-3d;
                                    }

                                    .ball {
                                    width: 50px;
                                    height: 50px;
                                    border-radius: 50%;
                                    background: #14e78e;
                                    margin: 100px;
                                    }

                                    .ball {
                                    animation-name: translate;
                                    animation-timing-function: linear;
                                    animation-iteration-count: infinite;
                                    animation-duration: 8s;
                                    transform-style: preserve-3d;
                                    }

                                    <div class="ring"></div>
                                    <div class="ball"></div>





                                    body {
                                    height: 50em;
                                    transform-style: preserve-3d;
                                    }

                                    .ring {
                                    position: relative;
                                    width: 200px;
                                    height: 100px;
                                    border-radius: 50%;
                                    border: 10px solid #ffcf82;
                                    z-index: 9;
                                    margin-top: 100px;
                                    transform: rotateX(50deg) rotateY(0deg) ;
                                    transform-style: preserve-3d;
                                    }

                                    @keyframes spinner {
                                    0%, 30% {
                                    transform: rotateX(50deg) rotateY(0deg);
                                    }
                                    60%, 100% {
                                    transform: rotateX(50deg) rotateY(180deg);
                                    }
                                    }

                                    @keyframes translate {
                                    0% {
                                    transform: translateY(0px);
                                    }
                                    50% {
                                    transform: translateY(-370px);
                                    }
                                    }

                                    .ring {
                                    animation-name: spinner;
                                    animation-timing-function: ease-in-out;
                                    animation-iteration-count: infinite;
                                    animation-duration: 5s;
                                    transform-style: preserve-3d;
                                    }

                                    .ball {
                                    width: 50px;
                                    height: 50px;
                                    border-radius: 50%;
                                    background: #14e78e;
                                    margin: 100px;
                                    }

                                    .ball {
                                    animation-name: translate;
                                    animation-timing-function: linear;
                                    animation-iteration-count: infinite;
                                    animation-duration: 8s;
                                    transform-style: preserve-3d;
                                    }

                                    <div class="ring"></div>
                                    <div class="ball"></div>






                                    share|improve this answer












                                    share|improve this answer



                                    share|improve this answer










                                    answered 3 hours ago









                                    valsvals

                                    45.5k857109




                                    45.5k857109






















                                        zubaida farha is a new contributor. Be nice, and check out our Code of Conduct.










                                        draft saved

                                        draft discarded


















                                        zubaida farha is a new contributor. Be nice, and check out our Code of Conduct.













                                        zubaida farha is a new contributor. Be nice, and check out our Code of Conduct.












                                        zubaida farha is a new contributor. Be nice, and check out our Code of Conduct.
















                                        Thanks for contributing an answer to Stack Overflow!


                                        • Please be sure to answer the question. Provide details and share your research!

                                        But avoid



                                        • Asking for help, clarification, or responding to other answers.

                                        • Making statements based on opinion; back them up with references or personal experience.


                                        To learn more, see our tips on writing great answers.




                                        draft saved


                                        draft discarded














                                        StackExchange.ready(
                                        function () {
                                        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54979433%2fmaking-a-ball-pass-through-a-ring-using-css%23new-answer', 'question_page');
                                        }
                                        );

                                        Post as a guest















                                        Required, but never shown





















































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown

































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown







                                        Popular posts from this blog

                                        How to label and detect the document text images

                                        Vallis Paradisi

                                        Tabula Rosettana