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? 我尝试应用＆＃34;左下角＆＃34;到动画的起始关键帧，但似乎对我没用。

这是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;
 }

我希望能帮到你

如何制作固定的CSS动画

1 个答案: