は、私は3点が必要

Question

jsfiddle

の作業を習慣短いCSSスニペットを見つけた「アニメーションを入力して」、私は何か美しいオンラインを発見した - >https://codepen.io/mattonit/pen/vLoddq

問題も、それが動作を停止jsfiddleに、その文句を言わない仕事です。

アイブ氏は、CSSのビットをハッキングしようとした - >https://jsfiddle.net/leathan/nfhod84k/しかし、私が得るすべての質問

div#wave { 
    text-align:center; 
    width:100px; 
    height:100px; 
    margin-left: auto; 
    margin-right: auto; 
} 
.dot { 
     display:inline-block; 
     width:12px; 
     height:12px; 
     border-radius:50%; 
     margin-right:3px; 
     background:#303131; 
     animation: wave 1.3s linear infinite; 

    &:nth-child(2) { 
     animation-delay: -1.1s; 
    } 
    &:nth-child(3) { 
     animation-delay: -0.9s; 
    } 
} 


@keyframes wave { 
    0%, 60%, 100% { 
     transform: initial; 
    } 

    30% { 
     transform: translateY(-15px); 
    } 
} 

HTML

<div id="wave"> 
    <span class="dot"></span> 
    <span class="dot"></span> 
    <span class="dot"></span> 
</div> 

で一緒にジャンプ3つのドット:(

CSSです

Answer 1

Codepenでは、Sass用のプリコンパイラをオンにしました。このコンパイラは通常のCSSに変換します。あなたのいずれかjsfiddle中にプリコンパイラをオン、または直接コンパイルされたCSSを使用する必要があります。

html, body { 
    margin: 0; 
    padding: 0; 
} 

body { 
    background: #F6F7F8; 
} 

div#wave { 
    position: relative; 
    margin-top: 50vh; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    margin-left: auto; 
    margin-right: auto; 
} 
div#wave .dot { 
    display: inline-block; 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    margin-right: 3px; 
    background: #303131; 
    animation: wave 1.3s linear infinite; 
} 
div#wave .dot:nth-child(2) { 
    animation-delay: -1.1s; 
} 
div#wave .dot:nth-child(3) { 
    animation-delay: -0.9s; 
} 

@keyframes wave { 
    0%, 60%, 100% { 
    transform: initial; 
    } 
    30% { 
    transform: translateY(-15px); 
    } 
} 

景品は、ネストされ;）

Answer 2

これは、LESSで書かれています。下に置き換えてみてください。

div#wave { 
 
    position: relative; 
 
    margin-top: 50vh; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
div#wave .dot { 
 
    display: inline-block; 
 
    width: 12px; 
 
    height: 12px; 
 
    border-radius: 50%; 
 
    margin-right: 3px; 
 
    background: green; 
 
    animation: wave 1.3s linear infinite; 
 
} 
 
    
 

 
div#wave .dot:nth-child(2) { 
 
    animation-delay: -1.1s; 
 
    
 

 
} 
 
div#wave .dot:nth-child(3) { 
 
    background:yellow;} 
 

 
@keyframes wave { 
 
    0%, 60%, 100% { 
 
    transform: initial; 
 
    } 
 
    30% { 
 
    transform: translateY(-15px); 
 
    } 
 
}

<div id="wave"> 
 
    <span class="dot"></span> 
 
    <span class="dot"></span> 
 
    <span class="dot"></span> 
 
</div>

Answer 3

codepenコードを参照してください。そのSASS。あなたは、あなたが同様に変換するために、このsiteを使用することができますCSS

にSCSSを変換する必要があります。

ドットの作業バージョン。

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    background: #F6F7F8; 
 
} 
 

 
div#wave { 
 
    position: relative; 
 
    margin-top: 50vh; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
div#wave .dot { 
 
    display: inline-block; 
 
    width: 12px; 
 
    height: 12px; 
 
    border-radius: 50%; 
 
    margin-right: 3px; 
 
    background: #303131; 
 
    animation: wave 1.3s linear infinite; 
 
} 
 

 
div#wave .dot:nth-child(2) { 
 
    animation-delay: -1.1s; 
 
} 
 

 
div#wave .dot:nth-child(3) { 
 
    animation-delay: -0.9s; 
 
} 
 

 
@keyframes wave { 
 
    0%, 
 
    60%, 
 
    100% { 
 
    transform: initial; 
 
    } 
 
    30% { 
 
    transform: translateY(-15px); 
 
    } 
 
}

<div id="wave"> 
 
    <span class="dot"></span> 
 
    <span class="dot"></span> 
 
    <span class="dot"></span> 
 
</div>

Answer 4

実は、あなたはSCSSのコードを使用しています。 SCSSをCSSにコンパイルする必要があります。対応するSCSSの以下にコンパイルされたCSSを使用してください。

html, body { 
    margin: 0; 
    padding: 0; 
} 

body { 
    background: #F6F7F8; 
} 

div#wave { 
    position: relative; 
    margin-top: 50vh; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    margin-left: auto; 
    margin-right: auto; 
} 
div#wave .dot { 
    display: inline-block; 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    margin-right: 3px; 
    background: #303131; 
    animation: wave 1.3s linear infinite; 
} 
div#wave .dot:nth-child(2) { 
    animation-delay: -1.1s; 
} 
div#wave .dot:nth-child(3) { 
    animation-delay: -0.9s; 
} 

@keyframes wave { 
    0%, 60%, 100% { 
    transform: initial; 
    } 
    30% { 
    transform: translateY(-15px); 
    } 
} 

Answer 5

このお試しください：SCSSにjsfiddleで

div#wave { 
 
    position: relative; 
 
    margin-top: 50vh; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
div#wave .dot { 
 
    display: inline-block; 
 
    width: 12px; 
 
    height: 12px; 
 
    border-radius: 50%; 
 
    margin-right: 3px; 
 
    background: #303131; 
 
    animation: wave 1.3s linear infinite; 
 
} 
 
div#wave .dot:nth-child(2) { 
 
    animation-delay: -1.1s; 
 
} 
 
div#wave .dot:nth-child(3) { 
 
    animation-delay: -0.9s; 
 
} 
 

 
@keyframes wave { 
 
    0%, 60%, 100% { 
 
    transform: initial; 
 
    } 
 
    30% { 
 
    transform: translateY(-15px); 
 
    } 
 
}

<div id="wave"> 
 
    <span class="dot"></span> 
 
    <span class="dot"></span> 
 
    <span class="dot"></span> 
 
</div>