Home » Web » CSS » Css3 shining animation for Html element

Css3 shining animation for Html element

In the current application I am developing, I wanted to have an Html element to have a shining effect with CSS3. The goal is to make an Html’s element to look new. Here is an animated gif that show the final result.
AnimationDiv

This animation must be set by setting a class to any Html element that we want the animation. For my purpose, it was a link element, but it could be a Div or an Li without problem. Once the class is set to the element you want, this one must run in an infinite loop. This is done by setting a custom class the CSS3 animation. This example work only for Chrome but you can define additional vendor prefix than webkit. The first line ensure that the animation will take place on the whole width of the Html element where we add the class. Then, we specify which animation we want to run, the duration of the animation, that we want to run in infinitely and the animation effect by setting a cubic-bezier tempo.

.shine-me {
    width:100%; /*Make sure the animation is over the whole element*/

    -webkit-animation-name: ShineAnimation;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.12,.89,.98,.47);
}

The animation goes from an initial state to an ending state. What we want is to move an background-image that we define totally in CSS by creating a linear-gradient. What we want is to have a transparent color that goes to a white color in the middle and go back to a transparent color. We then move from a position outside the vision to a position out of vision.

@-webkit-keyframes ShineAnimation{
    from {
        background-repeat:no-repeat;
        background-image:-webkit-linear-gradient(
            top left,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.0) 45%,
            rgba(255, 255, 255, 0.5) 48%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.5) 52%,
            rgba(255, 255, 255, 0.0) 57%,
            rgba(255, 255, 255, 0.0) 100%
        );
        background-position:-250px -250px;
        background-size: 600px 600px
    }
    to {
        background-repeat:no-repeat;
        background-position:250px 250px;
    }
}

This code has obviously some flaws. First of all, it does not scale very well with big Html element. This is due mainly because of the background-position that is set the specific pixel position. The second flaw is the color of the shining animation. If the background of the Html element is too bright, than we do not see the shining effect, if it is too dark, the shining effect looks fake.


You can find the code and a demo in this JsFiddle : http://jsfiddle.net/kg2fw40v/.

If you like my article, think to buy my annual book, professionally edited by a proofreader. directly from me or on Amazon. I also wrote a TypeScript book called Holistic TypeScript

2 Responses so far.

  1. Sheila says:

    Hi Patrick,

    Your code is perfect but it doesn’t work for Firefox.

    I change it but it doesn’t work yet 🙁 can you guide me please.I need it as soon as possible.

    .shine-me {
    width:100%; /*Make sure the animation is over the whole element*/

    -webkit-animation-name: ShineAnimation;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.12,.89,.98,.47);

    animation:ShineAnimation 5s infinite;
    animation-timing-function: cubic-bezier(.12,.89,.98,.47);

    }

    @-webkit-keyframes ShineAnimation{
    from {
    background-repeat:no-repeat;
    background-image:-webkit-linear-gradient(
    top left,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) 45%,
    rgba(255, 255, 255, 0.5) 48%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.5) 52%,
    rgba(255, 255, 255, 0.0) 57%,
    rgba(255, 255, 255, 0.0) 100%
    );
    background-position:-250px -250px;
    background-size: 600px 600px
    }
    to {
    background-repeat:no-repeat;
    background-position:250px 250px;
    }
    }

    @-moz-keyframes ShineAnimation{
    from {
    background-repeat:no-repeat;
    background-image:-moz-linear-gradient(
    top left,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) 45%,
    rgba(255, 255, 255, 0.5) 48%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.5) 52%,
    rgba(255, 255, 255, 0.0) 57%,
    rgba(255, 255, 255, 0.0) 100%
    );
    background-position:-250px -250px;
    background-size: 600px 600px
    }
    to {
    background-repeat:no-repeat;
    background-position:250px 250px;
    }
    }

    @keyframes ShineAnimation{
    from {
    background-repeat:no-repeat;
    background-image:linear-gradient(
    top left,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) 45%,
    rgba(255, 255, 255, 0.5) 48%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.5) 52%,
    rgba(255, 255, 255, 0.0) 57%,
    rgba(255, 255, 255, 0.0) 100%
    );
    background-position:-250px -250px;
    background-size: 600px 600px
    }
    to {
    background-repeat:no-repeat;
    background-position:250px 250px;
    }
    }
    p
    {
    background-color:#c0c0c0;
    padding:15px;
    }

    So Thankss

  2. nikhill developer says:

    its does not work on firefox or other old browers its highly compatabile to only chrome and opera.. if u using firefox you have to give on that

Leave a Reply to Sheila Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.