브라우저 창 중심의 요소 애니메이션?

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

각 요소에 대해 두 개의 애니메이션 이름 속성을 설정하려고합니다. 첫 번째 요소와 마지막 요소가 오버라이드됩니다. 여러 속성을 처리하려면 각 @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; 희망이 도움이됩니다.