之前問過了這個類似問題
https://segmentfault.com/q/10...
是如何讓他能來回走動
.img-move{ animation:imgMove 4s linear infinite; -moz-animation:imgMove 4s linear infinite; -webkit-animation:imgMove 4s linear infinite; -o-animation:imgMove 4s linear infinite; position: absolute;}@keyframes imgMove{0% {right:100px;}25%{right:150px;}50%{right:100px;}75%{right:50px}100% {right:100px}}
現在想問的是
如何讓它像雲一樣,讓圖慢慢移動後,消失?
然後在原本那一端再出現一次圖,不斷循環?
解决方案
@keyframes imgMove { 0% { right: 100px; opacity: 0.5; } 25% { right: 150px; opacity: 1; } 50% { right: 100px; opacity: 0.5; } 75% { right: 50px; opacity: 0; } 100% { right: 100px; opacity: 1; }}
其實加上透明就行了,動畫內的樣式是可以有多個的。
然後根據你的意思是不是直接寫成下面的就可以了?
@keyframes imgMove { 0% { right: 150px; opacity: 1; } 100% { right: 50px; opacity: 0; }}