DevStudent

Windows Store apps HTML5 Controls Animation with CSS

In this example a square box with paragraph text is displayed on app launch.
With a click on the box the animation starts transforming square box into ellipse with changes in the text and color inside it.

HTML Code

<div class="animations">
            <p class="box" id="boxAngry">Don't Click Me!<br />(makes me angry)</p>
                </div>

Explanation: Paragraph tag with id as boxAngry and css class as box is inside a division tag with css class animations.

CSS Code

.animations .box {
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 300px;
    width: 300px;
    height: 195px;
    font-size: 20pt;
    background-color: lightgray;
    border: solid 2px blue;
}

.animate-get-angry {
    animation: get-angry 5s forwards;
}

@keyframes get-angry {
    0%   {box-shadow: 0 0 1px 1px #ff0000; color:yellow; border-radius: 0%;}
    60%  {color: #ffd800; font-size: 22pt; font-weight:400 ;}
    80%  {color: #ffd800; font-size: 24pt; font-weight:600 ;}
    90%  {color: #ff6a00; font-size: 32pt; font-weight:800 ;}
    100% {color: #ff0000; font-size: 40pt;  font-weight:bold  ; box-shadow: 0 0 30px 15px #000000;border-color: black; text-shadow: 0 0 10px 2px #22DD22;border-radius: 50%; }
}
@keyframes drop-in {
    0%   {top: -100px;}
    100% {top: 0px;}
}

Explanation: First css class to design div tag as square box with gray background.
Second animation class will perform animation using below keyframes.
Keyframes are used to define animation. % is used to define styles to be applied at regular intervals.
0% frame styles are applied at the starting and 100% frame styles are applied at the end in the mean while styles transformation can be defined as shown in the above css code.

Js code:

   boxAngry.addEventListener("animationstart", function (arg) {
                boxAngry.innerText = "Angry";
            });

            boxAngry.onclick = function () {
                boxAngry.classList.toggle("animate-get-angry");
            };

Explanation: First event fired on animationstart to change the innertext of the paragraph to Angry.
Second event fired onclick to change the css class to animate-get-angry to perform animation.