Site Search:

How to add css animation to your blogger post in 5 minutes

<Back

copy paste the following code into you blogger post's HTML
Example

<a href="http://xyzcode.blogspot.com/2016/07/ocp-exam-1z0-809-breaks-down.html" target="_blank">&lt;Back</a><br />
<br />
<style>
.ani {
    width: 250px;
    height: 100px;
    background:#F5F3EE;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 1s;
    animation-delay: 0s;
}

.left {
 float:left;
 width:260px;
}
.right {
 float:left;
 width:250px;
}

/* Safari 4.0 - 8.0 */
#OutputStream {-webkit-animation-delay: 0s;}
#FileOutputStream {-webkit-animation-delay: 2s;}
#ObjectOutputStream {-webkit-animation-delay: 4s;}

#InputStream {-webkit-animation-delay: 6s;}
#FileInputStream{-webkit-animation-delay: 8s;}
#ObjectInputStream{-webkit-animation-delay: 10s;}

/* Standard syntax */
#OutputStream {animation-delay: 0s;}
#FileOutputStream {animation-delay: 2s;}
#ObjectOutputStream {animation-delay: 4s;}

#InputStream {animation-delay: 6s;}
#FileInputStream {animation-delay: 8s;}
#ObjectInputStream {animation-delay: 10s;}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:white; left:500px; top:0px;}

    100% {background-color:gold; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:white; left:500px; top:0px;}

    100% {background-color:gold; left:0px; top:0px;}
}

</style>


The stream classes are used for inputting and outputting all types of binary or byte data.<br />
<div class="left">
<br />
<div class="ani" id="ObjectInputStream">
<b>ObjectInputStream</b>
<br />
<br />
Deserializes primitive Java data types and grahs of Java objects from an existing InputStream
</div>
<br />
<div class="ani" id="FileInputStream">
<b>FileInputStream</b>

Reads file data as bytes
</div>
<br />
<div class="ani" id="InputStream">
<b>InputStream</b>
<br />
<br />
The abstract class all InputStream classes inherit from
</div>
</div>
<div class="right">
<br />
<div class="ani" id="ObjectOutputStream">
<b>ObjectOutputStream</b>
<br />
<br />
Serializes primitive Java data types and graphs of Java objects from an existing InputStream
</div>
<br />
<div class="ani" id="FileOutputStream">
<b>FileOutputStream</b>
<br />
<br />
Writes file data as bytes
</div>
<br />
<div class="ani" id="OutputStream">
<b>OutputStream</b>
<br />
<br />
The abstract class all OutputStream classes inherit from
</div>
</div>