Home/ Questions/Q 8033561
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T01:44:18+00:00

http://dev.viral-minds.com/miller/abc/abc.html two questions about this How do I keep the green block from blinking

  • 0

http://dev.viral-minds.com/miller/abc/abc.html

two questions about this

  1. How do I keep the green block from “blinking” at the beginning when the page loads?
  2. The animation only works on chrome at the moment…how to get it to work in FF and IE?

thanks.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>

    <style type="text/css">
        body 
        {
            background-color:#FFFFF0; /*ivory*/
            overflow: hidden;
        }

        #box
        {
            position: absolute;
            width:495px;
            height:263px;
            background:#32331d;
            top: 20px;
            left: 20px;
        }

        #nav
        {
            position: absolute;
            margin-left:30px;
            width:100%;
            height:100px;
            top: 425px;
            z-index: 100;
            background-image:url('colors.png');
            background-repeat:no-repeat;
        }


        #stars,
        #stars-2,
        #small-stars,
        #small-stars-2 {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 800px;
            height: 800px;
            margin: -300px 0 0 -300px;
            background: url(stars-large.png) no-repeat center center;
            -webkit-animation-name: starsLarge;
            -webkit-animation-duration: 240s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }

        @-webkit-keyframes starsLarge {
            from {
                -webkit-transform: rotate(0deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(360deg) scale(.5);
                opacity: .5;
            }
        }

        #stars-2 {
            -webkit-animation-name: starsLargeAlt;
            -webkit-animation-duration: 180s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }

        @-webkit-keyframes starsLargeAlt {
            from {
                -webkit-transform: rotate(180deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(360deg) scale(.5);
                opacity: .5;
            }
        }

        #small-stars,
        #small-stars-2 {
            background: url(stars-small.png) no-repeat center center;
            -webkit-animation-duration: 60s;
            -webkit-animation-name: starsSmall;
        }

        #small-stars-2 {
            -webkit-animation-name: starsSmallAlt;
            -webkit-animation-duration: 120s;
        }

        @-webkit-keyframes starsSmall {
            from {
                -webkit-transform: rotate(360deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(0deg) scale(.5);
                opacity: .5;
            }
        }

        @-webkit-keyframes starsSmallAlt {
            from {
                -webkit-transform: rotate(0deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(360deg) scale(.5);
                opacity: .5;
            }
        }
    </style>
</head>
<body>
    <div id="box"><img src="actual.png"></img></div>
    <div id="nav"></div>
    <div id="stars"></div>
    <div id="stars-2"></div>
    <div id="small-stars"></div>
    <div id="small-stars-2"></div>
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Item 1: The green block flickers because the overlayed image is not retrieved from the server yet. You could add display: none; to the CSS for #box, then programmatically display it after the page has been fully loaded. For example:

    // jQuery:
$(document).ready(function(){
  $('#box').show();
});

    Item 2: The animation only works in Chrome because you are using -webkit specific style definitions. You will need to research alternatives, such as -moz and -ms in order to see if it can work in those browsers. You could also try omitting the prefix altogether.

    • 0