CSS3トランジションボックスシャドーパルス

Question

私は、ボックスシャドウだけがボタン全体ではなく脈動していることを確認しようとしています。

経験は、ボタンがしっかりと表示されるはずですが、それが理にかなっていると、ボックスの影がフェードアウトします。私は、これは何が必要だと思う

.gps_ring { 
    border: 3px solid #999; 
    -webkit-border-radius: 30px; 
    height: 42px; 
    width: 180px; 
    background-color: blue; 
    text-align: center; 
    display: block; 
    color: white; 
    box-shadow: 0 0 17px black; 
    -moz-box-shadow: 0 0 17px black; 
    -webkit-box-shadow: 0 0 17px black; 
    -webkit-animation: pulsate 1s ease-out; 
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0 
} 
@-webkit-keyframes pulsate { 
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;} 
    50% {opacity: 1.0;} 
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;} 
} 

EXAMPLE

Answer 1

は、単にあなたが `-moz-ボックスshadow`と` -webkit-ボックスシャドウを使用しない理由この

.gps_ring { 
 
    border: 3px solid #999; 
 
    border-radius: 30px; 
 
    height: 42px; 
 
    width: 180px; 
 
    background-color: blue; 
 
    text-align: center; 
 
    display: block; 
 
    color: white; 
 
    box-shadow: 0 0 17px black; 
 
    animation: pulsate 1s ease-out infinite; 
 
} 
 
@-webkit-keyframes pulsate { 
 
    0% { box-shadow: 0 0 0 black; } 
 
    50% { box-shadow: 0 0 17px black; } 
 
    100% { box-shadow: 0 0 0 black; } 
 
}

<div id="state" class="grid_4 alpha"> 
 
    <a href="#" class="gps_ring">Touch me</a> 
 
</div>

Answer 2

：

は、ここに私のコードです。よりよい解決策http://codepen.io/governorfancypants/pen/zvMxWm

<div class="circle"> 
    <div class="inner-circle"></div> 
    <div class="cover-circle"></div> 
</div> 


.pulsating-circle { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translateX(-50%) translateY(-50%); 
    width: 30px; 
    height: 30px; 

    &:before { 
    content: ''; 
    position: relative; 
    display: block; 
    width: 300%; 
    height: 300%; 
    box-sizing: border-box; 
    margin-left: -100%; 
    margin-top: -100%; 
    border-radius: 45px; 
    background-color: #01a4e9; 
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; 
    } 

    &:after { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 0; 
    display: block; 
    width: 100%; 
    height: 100%; 
    background-color: white; 
    border-radius: 15px; 
    box-shadow: 0 0 8px rgba(0,0,0,.3); 
    animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite; 
    } 
} 

@keyframes pulse-ring { 
    0% { 
    transform: scale(.33); 
    } 
    80%, 100% { 
    opacity: 0; 
    } 
} 

@keyframes pulse-dot { 
    0% { 
    transform: scale(.8); 
    } 
    50% { 
    transform: scale(1); 
    } 
    100% { 
    transform: scale(.8); 
    } 
}