パルスエフェクトCSSボタンが機能しない

Question

このボタンの周りにパルスエフェクトを作成しようとしています。 残念ながら、その機能していない...と私はエラーを見つけることができません。

#pulse { 
 
    width: 50px; 
 
    height: 100%; 
 
} 
 

 
#show { 
 
    float: left; 
 
    margin-top: -200px; 
 
    margin-left: 10px; 
 
    border: none; 
 
    height: 40px; 
 
    width: 40px; 
 
    box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7); 
 
    border-radius: 50%; 
 
    background: none; 
 
    cursor: pointer; 
 
    background-image: url('bilder/showleftside.svg'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); 
 
    -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); 
 
    -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); 
 
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); 
 
} 
 

 
@keyframes pulse { 
 
    0% { 
 
    transform: scale(1, 1); 
 
    } 
 
    50% { 
 
    opacity: 0.3; 
 
    } 
 
    100% { 
 
    transform: scale(1.5); 
 
    opacity: 0; 
 
    } 
 
}

<div id="pulse"> 
 
    <button id="show" type="button" onclick=""></button> 
 
</div>

Answer 1

は、名前pulseとアニメーションを定義しました。このパルスアニメーションはあなたのコードには欠けています。 キーフレームを追加して、アニメーションを定義します。

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

#pulse { 
 
    width: 50px; 
 
    height: 100%; 
 
} 
 

 

 

 
#show { 
 
    float: left; 
 
    margin: 20px; 
 

 
    border: 1px solid #ddd; 
 
    height: 40px; 
 
    width: 40px; 
 
    box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7); 
 
    border-radius: 50%; 
 
    background: none; 
 
    cursor: pointer; 
 

 
    background-image: url('bilder/showleftside.svg'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 

 
    -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); 
 
    -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); 
 
    -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); 
 
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); 
 
} 
 

 
@keyframes pulse { 
 
    0% { 
 
    transform: scale(1); 
 
    } 
 
    50% { 
 
    transform: scale(1.2); 
 
    } 
 
    100% { 
 
    transform: scale(1); 
 
    } 
 
}

<div id="pulse"> 
 
    <button id="show" type="button">X</button> 
 
</div>