CSS3 animations

by Mohammed Ismail Ansari

HTML

<div id="animated-div">
In the Year of Darkness, 2029, the rulers of this planet devised the ultimate plan. They would reshape the Future by changing the Past. The plan required something that felt no pity. No pain. No fear. Something unstoppable. They created 'THE TERMINATOR'.
</div>

CSS

#animated-div
{
    height: 250px;
    width: 250px;
    padding: 10px;
    border: 1px solid Black;
    background-color: Cyan;
    -webkit-animation: colorAnimation 5s;
    -webkit-animation-delay: 5s;
}

@-webkit-keyframes colorAnimation
{
    10%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    80% {background: green;}
}

#animated-div:hover
{
    -webkit-animation-play-state: paused;
}

JavaScript

// CSS3 animations