CSS3 flying effect

by Reiot

HTML

<div id="a"></div>

<div id="b"></div>

CSS

#a {
    position: absolute;
    left: 10px;
    top: 100px;
    
    width: 100px;
    height: 100px;
    background: blue;
    
    -webkit-transition:all 1s ease-in-out;
}

#a:hover {
    -webkit-transform: translateY(-10px);
}

#b {
    position: absolute;
    left: 150px;
    top: 100px;
    
    width: 100px;
    height: 100px;
    background: green;
}

@-webkit-keyframes infinite-spinning {
    from {
        -webkit-transform: translateY(0);
}
to {
    -webkit-transform: translateY(10px);
}
}
#b {
    -webkit-animation: infinite-spinning 2s infinite alternate ease-in-out;
}