Search code examples
htmlcsswebkit

Tacky Text not appearing

New to HTML/CSS - trying to make a blinking, bouncing, rainbow title come to life, "Awesome Text", but it just appears blank. Based on the example here https://codepen.io/raaasin/pen/quvHr.

Any ideas what is going wrong? It works as long as I remove CSS color change element.

<head>
  <title>This is awesome</title>  
  <style>
    .awesome {

      font-family: futura;
      font-style: italic;

      width:100%;

      margin: 0 auto;
      text-align: center;

      color:#313131;
      font-size:45px;
      font-weight: bold;
      position: absolute;
      -webkit-animation:colorchange 20s infinite alternate;      

    }

    @-webkit-keyframes colorchange {
      0% { color: blue; }      
      10% { color: #8e44ad; }
      20% { color: #1abc9c; }      
      30% { color: #d35400; }      
      40% { color: blue; }      
      50% { color: #34495e; }      
      60% { color: blue; }      
      70% { color: #2980b9; }
      80% { color: #f1c40f; }      
      90% { color: #2980b9; }      
      100% { color: pink; }
    }
  </style>

</head>

<body onload="blink();">

<html>
<body style="background-color:black;">
<font color="green">

<marquee direction="down" width="1000" height="100" behavior="alternate">
  <marquee behavior="alternate">
    <h1><div id="blinking"><p class="awesome">Awesome Text</p></div></h1>
  </marquee>
</marquee>   


</font>
</html>

<script>


function blink() {
    var f = document.getElementById('blinking');
    setInterval(function() {
        f.style.display = (f.style.display == 'none' ? '' : 'none');
    }, 300);
}

</script>

Solution

  • if you remove position: absolute; it will start bouncing around

      -webkit-animation:colorchange 2s infinite alternate;

    it was 20s which is 20 seconds so I shortened it to 2. Change to what you like :)