我該如何製作一個固定的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; 
} 

我希望能夠幫助您