어떻게 고정 된 CSS 애니메이션을 만들 수 있습니까?

Question

이 게임에서 : https://jsfiddle.net/3e5sqe36/1 고정 위치 div에서 애니메이션을 사용하려고하지만 div에 애니메이션을 적용하면 뷰포트 상단에서 밀어냅니다.

나는이 질문을 발견했다. How do I use CSS animations to slide a fixed position element from the bottom of the page to the top? 애니메이션의 시작 키 프레임에 "왼쪽 하단"을 적용하려고 시도했지만 그게 나에게도 효과가없는 것 같다.

이

.animated { 
    -webkit-animation-name: pulse; 
    -webkit-animation-duration: .1s; 
    -webkit-animation-iteration-count: inifinite; 
    animation-name: pulse; 
    animation-duration: .1s; 
    animation-iteration-count: infinite; 
} 

@-webkit-keyframes pulse { 
    0% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(1.1); } 
    100% { -webkit-transform: scale(1); } 
} 
@keyframes pulse { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.1); } 
    100% { transform: scale(1); } 
} 
.pulse { 
    -webkit-animation-name: pulse; 
    animation-name: pulse; 
} 

Answer 1

당신 DIV가 고정 된 위치에 있지 당신이 그것을 넣어 IMG입니다 : 여기

는 CSS 코드입니다.

내가 이렇게 :

· HTML

<div class="animated pulse"><img class="imgInside" src="http://i.imgur.com/PTxTk6o.gif"></div> 

· CSS

.pulse { 
    -webkit-animation-name: pulse; 
    animation-name: pulse; 
    position: fixed; 
    left:5%; 
    bottom: 5%; 
} 
.imgInside { 
    display: block; 
    filter:drop-shadow(-10px 0px 3px #000); 
    -webkit-filter:drop-shadow(-10px 0px 3px #000); 
    width:100px; 
    z-index: -2; 
} 

나는 희망 도움을 당신에게