Notes And Soft: HTML AND CSS

SOME CSS3 Simple ANIMATIONS EXAMPLES 2014

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="display: none; margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJdrNxlcJ5JiFZh5AS0UewyVxWCtkDJOvsRXskC9ZpIyxBmf485Ntb776MVrLz18jHmNCquuH4nelrQeaEe6fl4Ij18lG_nA6drssjPeutpVUSoc6tWsynBj44QEpxDN08LFliKS09ufQK/s1600/css3animation-banner.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJdrNxlcJ5JiFZh5AS0UewyVxWCtkDJOvsRXskC9ZpIyxBmf485Ntb776MVrLz18jHmNCquuH4nelrQeaEe6fl4Ij18lG_nA6drssjPeutpVUSoc6tWsynBj44QEpxDN08LFliKS09ufQK/s320/css3animation-banner.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">css3 Animations Examples by NotesAndSoft </td></tr>
</tbody></table>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-4861872728500410" data-ad-slot="3693836080" style="display: inline-block; height: 280px; width: 336px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

#anim1{
  float: left;
  width: 150px;
  height: 150px;
  background-color: #0000FF;
transition: 2s; 
  opacity: 0.3;
filter:alpha(opacity=30);
  margin: 5px;
}
#anim1:hover{
  padding-left: 150px;
   opacity: 1.0;
filter:alpha(opacity=100);
  
}
#anim2{
  float: left;
  width: 150px;
  height:150px;
  background-color: #0000FF;
transition: 2s; 
  opacity: 0.3;
filter:alpha(opacity=30);
  margin: 5px;
}
#anim2:hover{

padding-bottom: 150px;
   opacity: 1.0;
filter:alpha(opacity=100);
  
}
#anim3{
  float: left;
  width: 150px;
  height: 150px;
background-color: #9ACD32;;;
transition: 2s; 
  opacity: 0.4;
filter:alpha(opacity=40);
   margin: 5px;
}
#anim3:hover{
  border-radius: 100px;
   opacity: 1.0;
filter:alpha(opacity=100);
  
}

#anim4{
  float: left;
  width: 150px;
  height: 150px;
background-color: #9ACD32;;;
transition: 2s; 
  opacity: 0.4;
filter:alpha(opacity=40);margin: 5px;

}
#anim4:hover{
  border-radius: 40px/100px;
   opacity: 1.0;
filter:alpha(opacity=100);
  
}
#anim5{
  float: left;
  width: 150px;
  height: 150px;
background-color: #9ACD32;;;
transition: 2s; 
  opacity: 0.4;
filter:alpha(opacity=40);
  margin: 5px;

}
#anim5:hover{
border-top-left-radius: 100px;
  border-bottom-right-radius: 100px;
   opacity: 1.0;
filter:alpha(opacity=100);
  
}
#anim6{
  float: left;
  width: 150px;
  height: 150px;
background-color: #9ACD32;;;
transition: 2s; 
  opacity: 0.4;
filter:alpha(opacity=40);
  margin: 5px;

}
#anim6:hover{
width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
   opacity: 1.0;
filter:alpha(opacity=100);
  
}
#anim7{
  float: left;
  width: 150px;
  height: 150px;
background-color: #9ACD32;;;
transition: 2s; 
  opacity: 0.4;
filter:alpha(opacity=40);
  margin: 5px;

}
#anim7:hover{
  width: 0; 
   height: 0;
   border-top: 80px solid pink;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent;
   opacity: 1.0;
filter:alpha(opacity=100);
  
}
#anim8{
  float: left;
  width: 150px;
  height: 150px;
background-color: #9ACD32;;;
transition: 2s; 
  opacity: 0.4;
filter:alpha(opacity=40);
  margin: 5px;

}
#anim8:hover{
  width: 0;
  height: 0;
  border-bottom: 90px solid black;
  border-top: 90px solid black;
  border-left: 40px solid red;
  border-right: 40px solid red;
  -moz-border-radius: 60px; 
  -webkit-border-radius: 60px; 
  border-radius: 60px;
   opacity: 1.0;
filter:alpha(opacity=100);
  
}
#anim9{
  float: left;
  width: 150px;
  height: 150px;
  background-color: #0000FF;
transition: 2s; 
  opacity: 0.3;
filter:alpha(opacity=30);
  margin: 5px;
}
#anim9:hover{
   width: 80px; 
   height: 80px; 
   background: purple;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
   opacity: 1.0;
filter:alpha(opacity=100);
  
}
#anim10{
  float: left;
  width: 150px;
  height: 150px;
  background-color: #0000FF;
transition: 2s; 
  opacity: 0.3;
filter:alpha(opacity=30);
  margin: 5px;
}
#anim10:hover{
  transform: rotateX(145deg);
   opacity: 1.0;
filter:alpha(opacity=100);
  
}
#anim11{
  float: left;
  width: 150px;
  height: 150px;
  background-color: #0000FF;
transition: 2s; 
  opacity: 0.3;
filter:alpha(opacity=30);
  margin: 5px;
}
#anim11:hover{
  transform: rotateY(145deg);
   opacity: 1.0;
filter:alpha(opacity=100);
  
}
#anim12{
  float: left;
  width: 150px;
  height: 150px;
  background-color: #0000FF;
transition: 2s; 
  opacity: 0.3;
filter:alpha(opacity=30);
  margin: 5px;
}
#anim12:hover{
  transform:translate(100px,50px);
   opacity: 1.0;
filter:alpha(opacity=100);
  
}
#anim13{
  float: left;
  width: 150px;
  height: 150px;
  background-color: #0000FF;
transition: 2s; 
  opacity: 0.3;
filter:alpha(opacity=30);
  margin: 5px;
}
#anim13:hover{
  transform:skew(45deg,30deg);
   opacity: 1.0;
filter:alpha(opacity=100);

}
</style>

SOME CSS3 Simple ANIMATIONS EXAMPLES 2014

css3 Animations Examples by NotesAndSoft

WebDevelopment

</style>
<br />
<div id="box1">
<a href="https://www.blogger.com/blogger.g?blogID=1474127819604670099#http://notesandsoft.blogspot.com/2013/02/html-and-css-tutorials.html">
</a>
<h3>
<a href="https://www.blogger.com/blogger.g?blogID=1474127819604670099#http://notesandsoft.blogspot.com/2013/02/html-and-css-tutorials.html">
  HTML<br />
  N<br />
  CSS
</a></h3>
<a href="https://www.blogger.com/blogger.g?blogID=1474127819604670099#http://notesandsoft.blogspot.com/2013/02/html-and-css-tutorials.html">
</a>
</div>
<div id="box1">
<a href="https://www.blogger.com/blogger.g?blogID=1474127819604670099#http://notesandsoft.blogspot.com/2013/03/fast-wordpressing-tutorials.html">
</a>
<h3 id="spcl">
<a href="https://www.blogger.com/blogger.g?blogID=1474127819604670099#http://notesandsoft.blogspot.com/2013/03/fast-wordpressing-tutorials.html">
  Wordpress<br />
  Blogging
</a></h3>
<a href="https://www.blogger.com/blogger.g?blogID=1474127819604670099#http://notesandsoft.blogspot.com/2013/03/fast-wordpressing-tutorials.html">
</a>
</div>
<div id="box1">
<a href="http://notesandsoft.blogspot.com/2013/08/fast-blogging-2013.html">
</a>
<h3 id="spcl">
<a href="http://notesandsoft.blogspot.com/2013/08/fast-blogging-2013.html">
  Blogger<br />
  Tutorials
</a></h3>
<a href="http://notesandsoft.blogspot.com/2013/08/fast-blogging-2013.html">
</a>
</div>
<div id="box1">
<a href="http://notesandsoft.blogspot.com/search/label/blogger%20tips%20n%20tricks">
</a>
<h3 id="spcl1">
<a href="http://notesandsoft.blogspot.com/search/label/blogger%20tips%20n%20tricks">
  Blogger<br />
  Tips N <br />Tricks
</a></h3>
<a href="http://notesandsoft.blogspot.com/search/label/blogger%20tips%20n%20tricks">
</a>
</div>

WebDevelopment

HTML N CSS Wordpress Blogging Blogger Tutorials Blogger Tips N Tricks

Working in Body Section

<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript">
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
<br />
<div style="text-align: center;">
<span style="color: #b45f06;"><span style="font-size: x-large;">Working in Body Section</span></span><br />
<div style="text-align: center;">
<br /></div>
</div>
<div style="text-align: center;">
<br />
<iframe width="560" height="480" src="//www.youtube.com/embed/c9imFbnwmUI" frameborder="0" allowfullscreen></iframe>
</div>
<div style="text-align: center;">
<br /></div>
<script type="text/javascript">
ch_fluidH = 1;
ch_nump = "4";
ch_client = "notesandsoft";
ch_width = 550;
ch_height = "auto";
ch_type = "mpu";
ch_sid = "Chitika Default";
ch_color_site_link = "0000CC";
ch_color_title = "0000CC";
ch_color_border = "FFFFFF";
ch_color_text = "000000";
ch_color_bg = "FFFFFF";
</script>
<script src="http://scripts.chitika.net/eminimalls/amm.js" type="text/javascript">
</script>
</div>

Working in Body Section

Working in Body Section

HTML Basic Structure

<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript">
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
<br />
<div style="text-align: center;">
<span style="color: #b45f06;"><span style="font-size: x-large;">HTML Basic Structure</span></span><br />
<div style="text-align: center;">
<br /></div>
</div>
<div style="text-align: center;">
<br />
<iframe allowfullscreen="" frameborder="0" height="480" src="//www.youtube.com/embed/vyKX7JiRMQ8" width="560"></iframe>
</div>
<div style="text-align: center;">
<br /></div>
<script type="text/javascript">
ch_fluidH = 1;
ch_nump = "4";
ch_client = "notesandsoft";
ch_width = 550;
ch_height = "auto";
ch_type = "mpu";
ch_sid = "Chitika Default";
ch_color_site_link = "0000CC";
ch_color_title = "0000CC";
ch_color_border = "FFFFFF";
ch_color_text = "000000";
ch_color_bg = "FFFFFF";
</script>
<script src="http://scripts.chitika.net/eminimalls/amm.js" type="text/javascript">
</script>
</div>

HTML Basic Structure

HTML Basic Structure

What Editor to Use

<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript">
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
<br />
<div style="text-align: center;">
<span style="color: #b45f06;"><span style="font-size: x-large;">What Editor to Use</span></span><br />
<div style="text-align: center;">
<br /></div>
</div>
<div style="text-align: center;">
<br />
<iframe allowfullscreen="" frameborder="0" height="480" src="//www.youtube.com/embed/lgg2sfDnQG4" width="560"></iframe>
</div>
<div style="text-align: center;">
<br /></div>
<script type="text/javascript">
ch_fluidH = 1;
ch_nump = "4";
ch_client = "notesandsoft";
ch_width = 550;
ch_height = "auto";
ch_type = "mpu";
ch_sid = "Chitika Default";
ch_color_site_link = "0000CC";
ch_color_title = "0000CC";
ch_color_border = "FFFFFF";
ch_color_text = "000000";
ch_color_bg = "FFFFFF";
</script>
<script src="http://scripts.chitika.net/eminimalls/amm.js" type="text/javascript">
</script>
</div>

What Editor to Use

What Editor to Use

HTML AND CSS TUTORIALS

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWl6eUW_wuuHR8Vf5Ui9pIdV4-tZU4C81JjPr6DS2C-ADNE9Wgxk4bltPaLK10_8OmQ7-Mksu3kzbzRvPmnxzprIwg65Nilx59syhC1Ug0byfWrsz5tnDuNBrYjQG-QhhFV0NeOxtVR_Hm/s1600/Untitled-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWl6eUW_wuuHR8Vf5Ui9pIdV4-tZU4C81JjPr6DS2C-ADNE9Wgxk4bltPaLK10_8OmQ7-Mksu3kzbzRvPmnxzprIwg65Nilx59syhC1Ug0byfWrsz5tnDuNBrYjQG-QhhFV0NeOxtVR_Hm/s400/Untitled-1.jpg" width="400" /></a></div>
Tutorials:<br />
<ol style="text-align: left;">
<li> <a href="http://notesandsoft.blogspot.com/2013/05/introduction-to-html-and-css.html" target="_blank">HTML and CSS Part 0, Introduction</a></li>
<li> <a href="http://notesandsoft.blogspot.com/2013/08/what-editor-to-use.html" target="_blank">HTML and CSS Part 1, What Editor to Use</a></li>
<li><a href="http://notesandsoft.blogspot.com/2013/05/html-basic-structure.html" target="_blank"> HTML and CSS Part 2, HTML Basic Structure</a></li>
<li> <a href="http://notesandsoft.blogspot.com/2013/05/working-in-body-section.html" target="_blank">HTML and CSS Part 3,Working in Body Section</a></li>
<li><a href="http://notesandsoft.blogspot.com/2013/04/learning-about-br-tag.html" target="_blank"> HTML and CSS Part 4, Learning About "br" tag</a></li>
<li> <a href="http://notesandsoft.blogspot.com/2013/05/lets-start-with-css.html" target="_blank">HTML and CSS Part 5,Lets Start with CSS</a></li>
<li> <a href="http://notesandsoft.blogspot.com/2013/05/css-in-head-and-external-file.html" target="_blank">HTML and CSS Part 6,CSS in Head and External File</a></li>
<li> <a href="http://notesandsoft.blogspot.com/2013/05/use-of-id-in-css.html" target="_blank">HTML and CSS Part 7, Use of ID in CSS</a></li>
<li><a href="http://notesandsoft.blogspot.com/2013/05/message-from-me.html" target="_blank"> HTML and CSS Part 8, Message From Me</a></li>
<li><a href="http://notesandsoft.blogspot.com/2013/03/learn-about-images.html" target="_blank"> HTML and CSS Part 9, Learn About Images</a></li>
<li> <a href="http://notesandsoft.blogspot.com/2013/04/learning-about-link-and-others.html" target="_blank">HTML and CSS Part10, Learning about Link and others</a></li>
<li> <a href="http://notesandsoft.blogspot.com/2013/05/text-decoration-and-background-coloring.html" target="_blank">HTML and CSS Part11, Text decoration and Background coloring</a></li>
<li><a href="http://notesandsoft.blogspot.com/2013/03/learn-what-you-have-learned.html" target="_blank">HTML and CSS Part12, Learn what you have learned</a></li>
</ol>
<br /></div>

HTML AND CSS TUTORIALS

Tutorials: HTML and CSS Part 0, Introduction HTML and CSS Part 1, What Editor to Use HTML and CSS Part 2, HTML Basic Structure ...