css - 如何讓圖片像雲一樣的行為？

Question

之前問過了這個類似問題
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}
}

現在想問的是
如何讓它像雲一樣，讓圖慢慢移動後，消失？
然後在原本那一端再出現一次圖，不斷循環？

Answer 1

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

In fact, just add transparency. There can be multiple styles in the animation.
Then based on what you mean, can you just write it as follows?

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

Answer 2

CSS animation, JS setInterval
Add the class name regularly, and then remove the class name

Answer 3

You can try to rotate the element inward into a line at 99-100%, and fly back quickly to create an illusion

Answer 4

Look at this, it’s awesome

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