JSFiddle - React, Tailwind, and code Playground

by stopsatgreen

HTML

<a class="warning">Delete</a>
<hr>
<a class="logo">Top10</a>

CSS

@-moz-keyframes top10 {
    from { background-position: 0 50%; }
    to { background-position: 100% 50%; }
}

@-webkit-keyframes top10 {
    from { background-position: 0 50%; }
    to { background-position: 100% 50%; }
}

.warning {
    -moz-animation: top10 3s linear infinite;
    -webkit-animation: top10 3s linear infinite;
    background-color: #FFA1A1;
    background-image: -moz-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 16px), -moz-linear-gradient(#FFA1A1, #FF4B4B);
    background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 16px), -webkit-linear-gradient(#FFA1A1, #FF4B4B);
    background-position: 0 50%;
    background-size: 68px 60px;
    border: 1px solid #BF3737;
    border-radius: 15px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: white;
    display: inline-block;
    font: bold 14px/2 sans-serif;
    height: 30px;
    min-width: 135px;
    padding: 0 10px;
    text-align: center;
    text-shadow: 1px 1px #F00, -1px -1px #F00;
}

.warning:hover {
    -moz-animation: top10 6s linear infinite;
    -webkit-animation: top10 6s linear infinite;
}

.logo {
    background: url('http://top10.com/media/img/logo-sprite.png') no-repeat 0 0;
    display: block;
    height: 0;
    overflow: hidden;
    padding-top: 45px;
    width: 110px;
}

.logo:hover {
    -moz-animation: top10 500ms steps(20) 1;
    -webkit-animation: top10 500ms steps(20) 1;
}