Cssアニメーション不透明度に関する：after擬似クラス

Question

私が作成した次のコードがあります。これはちょっとしたアニメーションです。

body { 
 
    background-color: #fafafa; 
 
} 
 

 
.container { 
 
    width: 700px; 
 
    height: 400px; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
    box-shadow: 17px 17px 45px #d1d1d1; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
.title { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 600; 
 
    font-size: 180%; 
 
    text-align: center; 
 
    position: relative; 
 
    padding-top: 20px; 
 
    color: orangered; 
 
} 
 

 
.circle { 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    background-color: #d3e6e6; 
 
    margin: 10px; 
 
    display: inline-block; 
 
    position: relative; 
 
    top: 60px; 
 
    animation: pulse 1s linear infinite alternate; 
 
    -webkit-animation: pulse 1s linear infinite alternate; 
 
} 
 

 
.circle:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 60px; 
 
    width: 60px; 
 
    border-radius: 50%; 
 
    background-color: none; 
 
    border-style: solid; 
 
    border-color: transparent; 
 
    border-top-color: #71cbcb; 
 
    border-bottom-color: #71cbcb; 
 
    border-width: 4px; 
 
    top: -9px; 
 
    left: -9px; 
 
    position: absolute; 
 
    animation: spinny 2s linear infinite; 
 
    -webkit-animation: spinny 2s linear infinite; 
 
} 
 

 
@keyframes spinny { 
 
    0% { 
 
    transform: scale(1) rotate(0deg); 
 
    -webkit-transform: scale(1) rotate(0deg); 
 
    } 
 
    50% { 
 
    transform: scale(1.2) rotate(180deg); 
 
    -webkit-transform: scale(1.2) rotate(180deg); 
 
    } 
 
    100% { 
 
    transform: scale(1) rotate(360deg); 
 
    -webkit-transform: scale(1) rotate(360deg); 
 
    } 
 
} 
 

 
@keyframes pulse { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet"> 
 
<div class="container"> 
 
    <p class="title">Spinner</p> 
 
    <div class="circle"></div> 
 
</div>

私は唯一の国境innterサークルには影響を与えずに "パルス" のアニメーションをしたいです。国境については、:afterを使って実際のサークルとは別のものになると考えましたが、パルスアニメーションが.circleの.circle:afterではなく、まだ影響を受けていないからです。

助けていただければ幸いです。イムはちょっと立ち往生：D

Answer 1

私はCSSで同じ変更を持ってくださいborder-width:0px;

body { 
 
      background-color: #fafafa; 
 
     } 
 

 
     .container { 
 
      width: 700px; 
 
      height: 400px; 
 
      background-color: white; 
 
      margin: 0 auto; 
 
      box-shadow: 17px 17px 45px #d1d1d1; 
 
      text-align: center; 
 
      vertical-align: middle; 
 
     } 
 

 
     .title { 
 
      font-family: 'Open Sans', sans-serif; 
 
      font-weight: 600; 
 
      font-size: 180%; 
 
      text-align: center; 
 
      position: relative; 
 
      padding-top: 20px; 
 
      color: orangered; 
 
     } 
 

 
     .circle { 
 
      height: 50px; 
 
      width: 50px; 
 
      border-radius: 50%; 
 
      background-color: #d3e6e6; 
 
      margin: 10px; 
 
      display: inline-block; 
 
      position: relative; 
 
      top: 60px; 
 
      animation: pulse1 1s linear infinite alternate; 
 
      -webkit-animation: pulse1 1s linear infinite alternate; 
 
     } 
 

 
     .circle:after { 
 
      content: ""; 
 
      display: inline-block; 
 
      height: 60px; 
 
      width: 60px; 
 
      border-radius: 50%; 
 
      background-color: none; 
 
      border-style: solid; 
 
      border-color: transparent; 
 
      border-top-color: #71cbcb; 
 
      border-bottom-color: #71cbcb; 
 
      border-width:4px; 
 
      top: -9px; 
 
      left: -9px; 
 
      position: absolute; 
 
      animation: spinny 2s linear infinite; 
 
      -webkit-animation: spinny 2s linear infinite; 
 

 
     } 
 

 
     @keyframes spinny { 
 
      0% { 
 
       transform: scale(1) rotate(0deg); 
 
       -webkit-transform: scale(1) rotate(0deg); 
 
      } 
 
      50% { 
 
       transform: scale(1.2) rotate(180deg); 
 
       -webkit-transform: scale(1.2) rotate(180deg); 
 
      } 
 
      100% { 
 
       transform: scale(1) rotate(360deg); 
 
       -webkit-transform: scale(1) rotate(360deg); 
 
      } 
 
     } 
 

 
     @keyframes pulse { 
 
      
 
      0% { 
 
       opacity: 1; 
 
      } 
 
      100% { 
 
       opacity: 0; 
 
      } 
 
      
 
      @keyframes pulse1 { 
 
      
 
      0% { 
 
       opacity: 1; 
 
      } 
 
      100% { 
 
       opacity: 1; 
 
      } 
 
      
 
     }

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

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Animation Spinner</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet"> 
 
    <style> 
 
    
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
     <p class="title">Spinner</p> 
 
     <div class="circle"></div> 
 
    </div> 
 
</body> 
 

 
</html>