key frame animation

by winddweb

HTML

<div id="box">
    Font Bulger!
</div>

<div id="wrapper">
<div id="subtitle">
    very very long sentences need to scroll back and forth!
</div>
</div>

CSS

@-webkit-keyframes fontbulger {
        0%, 100% {
                font-size: 12px;
        }
        50% {
                font-size: 20px;
        }
}
#box {
     -webkit-animation: fontbulger 2s infinite;
}

@-webkit-keyframes marquee {
        0%, 100% {
                left: 0px;
        }
        50% {
                left: -70px;
        }
}
#subtitle {
     -webkit-animation: marquee 5s ease infinite;
    width:400px;
    position:absolute;
}
#wrapper{
    width:300px;
    height:20px;
    background:#ddd;
    position:absolute;
    top:100px;
    overflow:hidden;
}