Wie kann ich eine feste CSS-Animation machen

Question

In dieser Geige: https://jsfiddle.net/3e5sqe36/1 Ich versuche, eine feste Position Div eine Animation verwenden, aber die Anwendung der Animation auf das Div verschiebt es von der Spitze des Ansichtsfensters.

Ich habe diese Frage gefunden: How do I use CSS animations to slide a fixed position element from the bottom of the page to the top? und ich habe versucht, die "unten links" auf die Start-Keyframe der Animation, aber das schien nicht für mich auch nicht zu arbeiten. Hier

ist der CSS-Code:

.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

Ihre div ist nicht in einer festen Position, ist das img wo Sie es ausdrückte.

ich dies tun:

· 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; 
} 

Ich hoffe, dass Ihnen helfen