CSS Transitions on :before/:after

by Avorin

HTML

<div></div>

CSS

div {
    width:10px;
    height:10px;
    background:red;
    position:relative;
}

div:after {
    content:"";
    position:absolute;
    width:10px;
    height:10px;
    background:blue;
    display:block;
    left:10px;
        
    -moz-animation-duration: 3s;
    -moz-animation-name: slidein;
    
    -webkit-animation-duration: 3s;
    -webkit-animation-name: slidein;
}


@-moz-keyframes slidein {
    from {
        left: 10px;
    }
    
    50% {
        left: 110px;
    }

    to {
        left:10px;
    }
}


@-webkit-keyframes slidein {
    from {
        left: 10px;
    }
    
    50% {
        left: 110px;
    }

    to {
        left:10px;
    }
}