CSS animation - floating image with keyframes

0 votes
296 views
added Jun 3, 2021 in CSS by lcjr First Warrant Officer (11,990 points)
img {
    &.v--dot {
        width: 91px !important;
        height: auto;
        // animation: indicator-floating 1.5s linear .3s infinite;
        animation-name: dot-floating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        margin-left: 30px;
        margin-top: 5px;
        @keyframes dot-floating {
            0% { transform: translate(0,  0px); }
            50%  { transform: translate(0, 15px); }
            100%   { transform: translate(0, -0px); }    
        }
    }  
} 

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...