Применить класс анимации CSS для многих экземпляров на одной странице

Question

Я пытаюсь создать кнопку совместного доступа для социальных сетей с анимированной кнопкой в ​​CSS. Но я хочу, чтобы какая-то кнопка отображалась на одной странице. Для другого контента. Но я обнаружил, что это не работает для второй кнопки. Если нажата вторая кнопка, первая кнопка, которая анимируется вместо секунды. Мой вопрос заключается в том, как сделать CSS применимым к каждой кнопке на моей странице?

Это скрипку: https://jsfiddle.net/2s6w4hq7/

Это мой HTML:

 <title>Profill</title> 
<br> 
<br> 
<br> 
<br> 
<div class="share"> 
     <div class="share-button"> 
      <input class="toggle-input" id="toggle-input" type="checkbox" /> 
      <label for="toggle-input" class="toggle"></label> 
      <ul class="network-list"> 
      <li class="twitter"> 
       <a href="#">Share on Twitter</a> 
      </li> 
      <li class="facebook"> 
       <a href="#">Share on Facebook</a> 
      </li> 
      <li class="googleplus"> 
       <a href="#">Share on Google+</a> 
      </li> 
      </ul> 
     </div> 
    </div> 
    <br> 
    <br> 
    <div class="share"> 
     <div class="share-button"> 
      <input class="toggle-input" id="toggle-input" type="checkbox" /> 
      <label for="toggle-input" class="toggle"></label> 
      <ul class="network-list"> 
      <li class="twitter"> 
       <a href="#">Share on Twitter</a> 
      </li> 
      <li class="facebook"> 
       <a href="#">Share on Facebook</a> 
      </li> 
      <li class="googleplus"> 
       <a href="#">Share on Google+</a> 
      </li> 
      </ul> 
     </div> 
    </div> 

и это CSS:

/* 
Using FontAwesome for icons 
https://fortawesome.github.io/Font-Awesome/ 
*/ 
.share-button { 
    position: relative; 
    width: 50px; 
    margin: 5px; 
} 

.toggle { 
    position: relative; 
    width: 50px; 
    height: 50px; 
    z-index: 10; 
    display: block; 
    cursor: pointer; 
    color: #fff; 
    background-color: #3D3D3D; 
    -webkit-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
     -ms-user-select: none; 
      user-select: none; 
    border-radius: 50%; 
} 
.toggle:hover { 
    background-color: #0a0a0a; 
} 
.toggle:after { 
    position: relative; 
    display: block; 
    width: 50px; 
    height: 50px; 
    font-family: 'FontAwesome'; 
    content: "\f1e0"; 
    line-height: 50px; 
    font-size: 29px; 
    text-align: center; 
    left: -2px; 
} 
.toggle-input { 
    display: none; 
} 
.toggle-input:checked + .toggle:after, .toggle-input:checked + .toggle:before { 
    background-color: #fff; 
    content: ""; 
    height: 3px; 
    width: 30px; 
    position: absolute; 
    left: 10px; 
    top: 23px; 
} 
.toggle-input:checked + .toggle:after { 
    -webkit-animation: bar1 0.3s forwards; 
      animation: bar1 0.3s forwards; 
    -webkit-transform: rotate(45deg); 
      transform: rotate(45deg); 
} 
.toggle-input:checked + .toggle:before { 
    -webkit-animation: bar2 0.3s forwards; 
      animation: bar2 0.3s forwards; 
    -webkit-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
} 

.network-list li { 
    position: absolute; 
    display: block; 
    width: 50px; 
    height: 50px; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    opacity: 0; 
} 
.network-list .twitter { 
    left: 50px; 
    top: -50px; 
    -webkit-transform-origin: 50% 100%; 
      transform-origin: 50% 100%; 
    -webkit-transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg); 
      transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg); 
    -webkit-transition: all 0.15s ease; 
    transition: all 0.15s ease; 
} 
.network-list .facebook { 
    left: 50px; 
    top: 0; 
    -webkit-transform-origin: 0% 50%; 
      transform-origin: 0% 50%; 
    -webkit-transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg); 
      transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg); 
    -webkit-transition: all 0.15s ease 0.3s; 
    transition: all 0.15s ease 0.3s; 
} 
.network-list .googleplus { 
    left: 50px; 
    top: 50px; 
    -webkit-transform-origin: 50% 0%; 
      transform-origin: 50% 0%; 
    -webkit-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); 
      transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg); 
    -webkit-transition: all 0.15s ease 0.15s; 
    transition: all 0.15s ease 0.15s; 
} 
.network-list a { 
    color: #fff; 
    position: relative; 
    display: block; 
    width: 50px; 
    height: 50px; 
    overflow: hidden; 
    line-height: 50px; 
    text-indent: 120%; 
    text-decoration: none; 
} 
.network-list a:before { 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    font-family: 'FontAwesome'; 
    font-size: 26px; 
    -webkit-font-smoothing: antialiased; 
    text-align: center; 
    line-height: 50px; 
    text-indent: 0; 
} 
.network-list .twitter a { 
    background-color: #00C3F3; 
    border-radius: 50%; 
} 
.network-list .twitter a:before { 
    content: "\f099"; 
} 
.network-list .twitter a:hover:before { 
    box-shadow: inset 0 0 0 2px #00C3F3; 
} 
.network-list .facebook a { 
    background-color: #2C609B; 
    border-radius: 50%; 
} 
.network-list .facebook a:before { 
    content: "\f09a"; 
} 
.network-list .facebook a:hover:before { 
    box-shadow: inset 0 0 0 2px #2C609B; 
} 
.network-list .googleplus a { 
    background-color: #EC3F25; 
    border-radius: 50%; 
} 
.network-list .googleplus a:before { 
    content: "\f0d5"; 
} 
.network-list .googleplus a:hover:before { 
    box-shadow: inset 0 0 0 2px #EC3F25; 
} 

input:checked ~ .network-list li { 
    opacity: 1; 
    top: 0; 
} 
input:checked ~ .network-list .twitter { 
    left: 50px; 
    top: -50px; 
    -webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg); 
      transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg); 
    -webkit-transition: all 0.25s ease 0.4s; 
    transition: all 0.25s ease 0.4s; 
} 
input:checked ~ .network-list .facebook { 
    left: 50px; 
    top: 0; 
    -webkit-transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg); 
      transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg); 
    -webkit-transition: all 0.25s ease 0.2s; 
    transition: all 0.25s ease 0.2s; 
} 
input:checked ~ .network-list .googleplus { 
    left: 50px; 
    top: 50px; 
    -webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg); 
      transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg); 
    -webkit-transition: all 0.25s ease 0.6s; 
    transition: all 0.25s ease 0.6s; 
} 

@-webkit-keyframes bar1 { 
    0% { 
    content: "\f1e0"; 
    width: 46px; 
    height: 50px; 
    background-color: transparent; 
    -webkit-transform: scale(1); 
      transform: scale(1); 
    top: 0; 
    left: 0; 
    opacity: 1; 
    } 
    50% { 
    background-color: transparent; 
    content: "\f1e0"; 
    width: 46px; 
    height: 50px; 
    top: 0; 
    left: 0; 
    -webkit-transform: scale(0.2); 
      transform: scale(0.2); 
    opacity: 0; 
    } 
    50.001% { 
    background-color: #fff; 
    left: 10px; 
    top: 22px; 
    content: ""; 
    height: 3px; 
    width: 30px; 
    -webkit-transform: rotate(45deg), scale(0.2); 
      transform: rotate(45deg), scale(0.2); 
    } 
    100% { 
    -webkit-transform: rotate(45deg), scale(1); 
      transform: rotate(45deg), scale(1); 
    opacity: 1; 
    } 
} 

@keyframes bar1 { 
    0% { 
    content: "\f1e0"; 
    width: 46px; 
    height: 50px; 
    background-color: transparent; 
    -webkit-transform: scale(1); 
      transform: scale(1); 
    top: 0; 
    left: 0; 
    opacity: 1; 
    } 
    50% { 
    background-color: transparent; 
    content: "\f1e0"; 
    width: 46px; 
    height: 50px; 
    top: 0; 
    left: 0; 
    -webkit-transform: scale(0.2); 
      transform: scale(0.2); 
    opacity: 0; 
    } 
    50.001% { 
    background-color: #fff; 
    left: 10px; 
    top: 22px; 
    content: ""; 
    height: 3px; 
    width: 30px; 
    -webkit-transform: rotate(45deg), scale(0.2); 
      transform: rotate(45deg), scale(0.2); 
    } 
    100% { 
    -webkit-transform: rotate(45deg), scale(1); 
      transform: rotate(45deg), scale(1); 
    opacity: 1; 
    } 
} 
@-webkit-keyframes bar2 { 
    0% { 
    background-color: transparent; 
    -webkit-transform: 0 scale(0.2); 
      transform: 0 scale(0.2); 
    opacity: 0; 
    } 
    50% { 
    background-color: transparent; 
    -webkit-transform: 0 scale(0.2); 
      transform: 0 scale(0.2); 
    opacity: 0; 
    } 
    50.1% { 
    background-color: transparent; 
    -webkit-transform: rotate(-45deg) scale(0.2); 
      transform: rotate(-45deg) scale(0.2); 
    opacity: 0; 
    } 
    100% { 
    -webkit-transform: rotate(-45deg) scale(1); 
      transform: rotate(-45deg) scale(1); 
    opacity: 1; 
    } 
} 
@keyframes bar2 { 
    0% { 
    background-color: transparent; 
    -webkit-transform: 0 scale(0.2); 
      transform: 0 scale(0.2); 
    opacity: 0; 
    } 
    50% { 
    background-color: transparent; 
    -webkit-transform: 0 scale(0.2); 
      transform: 0 scale(0.2); 
    opacity: 0; 
    } 
    50.1% { 
    background-color: transparent; 
    -webkit-transform: rotate(-45deg) scale(0.2); 
      transform: rotate(-45deg) scale(0.2); 
    opacity: 0; 
    } 
    100% { 
    -webkit-transform: rotate(-45deg) scale(1); 
      transform: rotate(-45deg) scale(1); 
    opacity: 1; 
    } 
} 

Answer 1

Вы должны использовать различные id для каждой кнопки и сопоставьте атрибут <label>'sfor с тем же идентификатором:

Например:

https://jsfiddle.net/2s6w4hq7/1/

  <input class="toggle-input" id="toggle-input-1" type="checkbox" /> 
      <label for="toggle-input-1" class="toggle"></label> 

      <input class="toggle-input" id="toggle-input-2" type="checkbox" /> 
      <label for="toggle-input-2" class="toggle"></label> 

Answer 2

this is simple. you just change your id name of the input and call same name in label. 

ie. 

<input class="toggle-input" id="toggle-input1" type="checkbox" /> 
<label for="toggle-input1" class="toggle"></label> 

change your code with above code. 

Answer 3

Вам просто нужно определить различные идентификаторы для Checkbox и этикетки под ДИВ класса share-button. См. Ниже код:

 <title>Profill</title> 
<br> 
<br> 
<br> 
<br> 
<div class="share"> 
     <div class="share-button"> 
      <input class="toggle-input" id="toggle-input" type="checkbox" /> 
      <label for="toggle-input" class="toggle"></label> 
      <ul class="network-list"> 
      <li class="twitter"> 
       <a href="#">Share on Twitter</a> 
      </li> 
      <li class="facebook"> 
       <a href="#">Share on Facebook</a> 
      </li> 
      <li class="googleplus"> 
       <a href="#">Share on Google+</a> 
      </li> 
      </ul> 
     </div> 
    </div> 
    <br> 
    <br> 
    <div class="share"> 
     <div class="share-button"> 
      <input class="toggle-input" id="toggle-input1" type="checkbox" /> 
      <label for="toggle-input1" class="toggle"></label> 
      <ul class="network-list"> 
      <li class="twitter"> 
       <a href="#">Share on Twitter</a> 
      </li> 
      <li class="facebook"> 
       <a href="#">Share on Facebook</a> 
      </li> 
      <li class="googleplus"> 
       <a href="#">Share on Google+</a> 
      </li> 
      </ul> 
     </div> 
    </div>