Search light

Animated clip-path (Chrome only)

by stopsatgreen

HTML

<img src="//placehold.it/400x200">

CSS

@keyframes camera {
    from, 10% {
        -webkit-clip-path: circle(50px at 50px 50%);
        animation-fill-mode: ease-in;
    }
    50%, 60% {
        -webkit-clip-path: circle(50px at 340px 50%);
    }
    62.5% {
        -webkit-clip-path: circle(60px at 340px 50%);
        animation-fill-mode: ease-out;
    }
    65% {
        -webkit-clip-path: circle(50px at 340px 50%);
    }
    90%, to {
        -webkit-clip-path: circle(50px at 50% 50%);
    }
}
img {
    animation: camera 4s both;
}