CODEWITHSUNDEEP
csscss-animations
Eric Bickerdyke
Eric Bickerdyke

Reputation: 33

CSS Animation: Varying the height of a text box, such that it "fills in" an identical text box with a new colour

I'm attempting to animate a header in CSS so that a white text box with the heading is gradually overlapped vertically by an identical, red text box.

I have been trying to do this by positioning the two text boxes on top of eachother, and then animating the height of the box on top. As shown in this video: http://atlantis.cit.ie/interaction/assignment1/animationpage.m4v

Here is the relevent HTML code: 

<header>
    <h1 id="whitetext">Animated Header</h1>
    <h1 id="redtext">Animated Header</h1>
</header>

And the CSS:

h1
{
    text-align: center;
    font-size: 300%;
    float: left;
    width: 75%;
    padding: 0;
    margin: 0;
}

#whitetext
{
    color: white;
    z-index: -1;
    position: absolute;
}

#redtext
{
    color: red;
    z-index: 1;
    position: absolute;
    -webkit-animation: headerAnimation 5s infinite;

}

@-webkit-keyframes headerAnimation{
    0% {line-height: 0%;}
    50% {line-height: 100%;}
    100% {line-height: 0%;}
}

I've tried to vary height, max-height, scale and line-height in the animation, as well as applying the animation to a separate container around the red text box, but to no avail.

Any help would be very much appreciated.

Upvotes: 1

Views: 196

Answers (1)

Kay
Kay

Reputation: 537

I've looked at your code, the solution you're trying to find you can realise it with using a background clip that has an image with a white and red part. Take a look at this quick thing I wrote (I actually used a white red flag).

So what's actually happening is that we animate the background image y position. Where the background is clipped in the text.

Please note that this will probably only work from IE9 and on.. (http://caniuse.com/#feat=background-img-opts)

Of course you could enhance this script by adding a background gradient, instead of the background image.

body {
  background: black;
}
h1 {
  font-family: Arial;
  font-size: 5em;
  text-align: center;
  background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Flag_red_white_5x3.svg/512px-Flag_red_white_5x3.svg.png);
  -webkit-background-clip: text;
  background-clip: text;
  color: rgba(0, 0, 0, 0);
  -webkit-animation: headerAnimation 5s infinite;
}
@-webkit-keyframes headerAnimation {
  0% {
    background-position: 0 -50%;
  }
  50% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -50%;
  }
}
<h1>Animation</h1>

Upvotes: 3

Related Questions