我该如何制作一个固定的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? 我尝试将“左下角”应用到动画的起始关键帧，但这似乎也不适用于我。

这里是CSS代码：

.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。

我这样做：

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

我希望能够帮助您