問(wèn)題描述

之前問(wèn)過(guò)了這個(gè)類似問(wèn)題https://segmentfault.com/q/10...是如何讓他能來(lái)回走動(dòng)

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

現(xiàn)在想問(wèn)的是如何讓它像雲(yún)一樣，讓圖慢慢移動(dòng)後，消失？然後在原本那一端再出現(xiàn)一次圖，不斷循環(huán)？

問(wèn)題解答

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

其實(shí)加上透明就行了，動(dòng)畫(huà)內(nèi)的樣式是可以有多個(gè)的。然後根據(jù)你的意思是不是直接寫(xiě)成下面的就可以了？

@keyframes imgMove { 0% {right: 150px;opacity: 1; } 100% {right: 50px;opacity: 0; }}回答2：

CSS animation, JS setInterval定時(shí)添加class類名，然后移除類名

可以試試讓99-100%時(shí)把元素給向內(nèi)旋轉(zhuǎn)成一條線，迅速飛回去，形成錯(cuò)覺(jué)

看看這個(gè)很厲害哦

http://www.17sucai.com/previe...