2017-02-27 4 views
-1

전체 CSS에서 다음 애니메이션 (나타나고 사라지는 도구 설명 상자)을 재생할 수있는 방법이 있는지 다시 한 번 궁금합니다. 나는지연시 재귀 적으로 내용 표시/숨기기

http://bourbon.io/

+2

시도한 코드와 연구를 게시하십시오. – thodic

+0

@Fabio를 기반으로 한 몇 가지 테스트를 http://codepen.io/Komagain/pen/MpKEaO에 권고했습니다. 애니메이션은 poopinout이라고합니다 – Komagain

답변

0

당신은 (사용자 지정 애니메이션)이 사용하여 애니메이션 속성을 할 수있는 재귀 싶었다.

예 :

HTML

<div id="container"> 
    <div id="animatediv"> 
    </div> 
</div> 

CSS 여기

#container { 
    background-color: yellow; 
    display: inline-block; 
    padding: 40px; 
} 

#animatediv { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    position: relative; 
    animation-name: hideshow; 
    animation-duration: 3s; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
} 

@keyframes hideshow { 
    0% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    } 
} 

은 jsfiddle입니다 :

https://jsfiddle.net/fabio1983/j6jj9766/

또한 일을 확인하실 수 있습니다 자세한 내용은 페이지 :

https://www.w3schools.com/css/css3_animations.asp

+0

예를 들어 Fabio에게 감사드립니다. 보완 질문에 특정 기간을 추가하고 쇼에 대해 특정 기간을 추가하는 방법은 무엇입니까? – Komagain

+0

@Komagain 키 프레임의 비율을 변경할 수 있습니다 ... 업데이트 된 jsfiddle 확인 : https://jsfiddle.net/fabio1983/j6jj9766/2/ – Fabio