如何制作固定的 CSS 动画答案

【问题标题】：How can I make a fixed CSS animation如何制作固定的 CSS 动画
【发布时间】：2016-07-30 09:34:59
【问题描述】：

在这个小提琴中：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; 
}

【问题讨论】：

检查this
谢谢！我没想到要在那里添加这些行，这很有帮助。

标签： css css-animations

【解决方案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;
 }

希望对你有帮助

【讨论】：