ブラウザウィンドウの中央付近の要素のアニメーション？

Question

基本的には、私は、スクリーンの中心の周りに自分自身を配置しながら、不可視から不透明にフェードインするためにアニメーション化したい要素の形のグループを持っています。

私は、CSS3のアニメーション/変換/変換が長い道のりを歩んでこれを行うのに十分だと読んだことがありますが、私はすべてのことが起こるように少し問題があります。右と下のダイヤモンドは動かず、左と上のダイヤモンドは消えません。ブラウザの幅を変更すると、すべてのものがちょうど互いに折り重なります。

CSS3でも私は何をしていますか？私はこの時点でjQueryから離れようとするのが最善だと聞いたことがありますが、正直言って私はjQueryでどのように行うのか100％ではありません。ここで

は、私がこれまで何をやったかです：

HTML：

<div id="all-diamonds"> 
    <div id="blue-diamond"></div> 
    <div id="purple-diamond"></div> 
    <div id="yellow-diamond"></div> 
    <div id="red-diamond"></div> 
</div> 

CSS：ダイヤモンドのための

/* Diamonds Animations */ 
@keyframes fade-in { 
    from {opacity: 0;} 
    to {opacity: 100;} 
} 

@keyframes center-from-left { 
    0% { 
    left: 0%; 
    } 
    100% { 
    left: 45%;  
    } 
} 

@keyframes center-from-top { 
    0% { 
    top: 0%; 
    } 
    100% { 
    top: 35%; 
    } 
} 

@keyframes center-from-right { 
    0% { 
    right: 15%;  
    } 
    100% { 
    right: 38.6%;  
    } 
} 

@keyframes center-from-bottom { 
    0% { 
    bottom: 0%; 
    } 
    100% { 
    bottom: 24%; 
    } 
} 

CSS：

/* Diamonds */ 
#blue-diamond { 
width: 0; 
height: 0; 
border: 50px solid transparent; 
border-bottom: 70px solid blue; 
position: absolute; 
top: 46.5%; 
left: 45%; 
animation-name: fade-in; 
animation-name: center-from-left; 
animation-duration: 5s; 
} 
#blue-diamond:after { 
content: ''; 
position: absolute; 
left: -50px; top: 70px; 
width: 0; 
height: 0; 
border: 50px solid transparent; 
border-top: 70px solid blue; 
} 


#purple-diamond { 
width: 0; 
height: 0; 
border: 50px solid transparent; 
border-bottom: 70px solid purple; 
position: absolute; 
top: 35%; 
left: 49.25%; 
margin: auto; 
animation-name: fade-in; 
animation: center-from-top; 
animation-duration: 5s; 
} 
#purple-diamond:after { 
content: ''; 
position: absolute; 
left: -50px; 
top: 70px; 
width: 0; 
height: 0; 
border: 50px solid transparent; 
border-top: 70px solid purple; 
} 

#yellow-diamond { 
width: 0; 
height: 0; 
border: 50px solid transparent; 
border-bottom: 70px solid yellow; 
position: absolute; 
top: 46.5%; 
right: 38.6%; 
animation-name: center-from-right; 
animation-name: fade-in; 
animation-duration: 5s; 
} 
#yellow-diamond:after { 
content: ''; 
position: absolute; 
left: -50px; top: 70px; 
width: 0; 
height: 0; 
border: 50px solid transparent; 
border-top: 70px solid yellow; 
} 

#red-diamond { 
width: 0; 
height: 0; 
border: 50px solid transparent; 
border-bottom: 70px solid red; 
position: absolute; 
bottom: 24%; 
left: 49.25%; 
animation-name: center-from-bottom; 
animation-name: fade-in; 
animation-duration: 5s; 
} 
#red-diamond:after { 
content: ''; 
position: absolute; 
left: -50px; top: 70px; 
width: 0; 
height: 0; 
border: 50px solid transparent; 
border-top: 70px solid red; 

} 

JSFiddle Here.

ありがとうございました！

Answer 1

各要素の2つのアニメーション名のプロパティを設定しようとしています。最初の要素と最後の要素で上書きされます。 複数のプロパティを処理するには、それぞれ@keyframe内にできます。 さらにopacityの範囲は0〜1で、10進数の値を使用できます。 0.7。あなたの赤いダイヤモンドのために

@keyframes center-from-bottom { 
    0% {opacity: 0; bottom: 0%;} 
    100% {opacity: 1; bottom: 24%; } 
} 

、その後、残りを修正する： 例えばこれを試してみてください。 #red-diamondスタイルから削除することを忘れないでください。animation-name: fade-in;希望すると助かります。