Notes And Soft: html and css tricks

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

Intresting Responsive HTML and CSS Navigation Bar

Intresting Responsive HTML and CSS Navigation Bar

Basic Intresting Responsive HTML and CSS Navigation Bar Please Hover Over Menu to See what happens

Create a Basic HTML and CSS Navigation Bar

Basic Navigtion Bar with HTML and CSS only