Animated Arrow for Carousels

Simple example of animating an arrow intended for carousels.

HTML

<div></div>

CSS

div {
    height: 100px;
    opacity: 0.25;
    position: relative;
    transition: all 0.25s;
    width: 100px;
}
div:before {
    background-color: black;
    content: '';
    display: block;
    height: 5px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -13px, 0) rotate(-90deg);
    transition: all 1s;
    width: 40px;
}
div:active {
    transform: scale3d(1.5, 1.5, 1);
}
div:hover {
    opacity: 1;
}
div:hover:before {
    transform: translate3d(-75%, -9px, 0) rotate(-90deg);
}
div:after {
    background-color: black;
    content: '';
    display: block;
    height: 5px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, 13px, 0) rotate(90deg);
    transition: all 1s;
    width: 40px;
}
div:hover:after {
    transform: translate3d(-75%, 9px, 0) rotate(30deg);
}