Animated bubbles upwards continuously with pure CSS

Here is a pure CSS experimental work to create floating bubbles without using JavaScript. These animated bubbles are also with popping effect. All these animation is created by Pure CSS.

For our little demo, we use a simple image for the conical flask and then create the bubbles entirely with markup and CSS. read more @ http://www.css-jquery-design.com/…

Animated bubbles upwards continuously with pure CSS

The HTML

<div id="beaker">
  <span class="bubble">
    <span class="glow"> </span>
  </span>
</div>

With our bubbles all made, now we need them to act like bubbles. We could use JavaScript but that’s no fun. Just use CSS! read more @ http://www.css-jquery-design.com/…read-more-button

Animated Color wheel spinning with CSS3 Keyframes animation, Transform and Transition

I have done some experimental work to create CSS3 Animation without using JavaScript. I end up creating some animations using CSS3 Keyframes and Transform and like to share. I have done this animation using border-color tricks and CSS Transform: i.e. CSS scale and CSS3 rotation.

Note: Before going I like to make something clear, Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property. Chrome and Safari requires the prefix -webkit- in css.

Important: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.

css3-keyframes-color-wheel-animation

The HTML

<div id="colorWheel">
    <span class="color01"></span>
    <span class="color02"></span>
    <span class="color03"></span>
    <span class="color04"></span>
    <span class="color05"></span>
    <span class="color06"></span>
    <span class="color07"></span>
    <span class="color08"></span>
    <span class="color09"></span>
    <span class="color10"></span>
</div>

The CSS

Now, We will use some CSS Technique using border-color tricks and CSS3 rotation. I have created this color cycle without using any image.  I have done a cool rotating wheel animation  using @keyframes animation.

#colorWheel {
    height: 100px;
    width: 100px;
    margin: 40px auto ;
    position: absolute; left:10%;
    -webkit-transform-origin: 50px 150px;
    -moz-transform-origin: 50px 150px;
    -ms-transform-origin: 50px 150px;
    -o-transform-origin: 50px 150px;
    transform-origin: 50px 150px;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    animation: wheel 10s ease-in-out infinite alternate;
    -moz-animation: wheel 10s ease-in-out infinite alternate;
    -webkit-animation: wheel 10s ease-in-out infinite alternate;
    -ms-animation: wheel 10s ease-in-out infinite alternate;
}

@keyframes wheel{
    0%{
    opacity:1;
    left:-10%;
    transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7}
100%{
    left: 90%;
    opacity:1;
    transform:scale(1) rotate(2160deg);
}
}
@-webkit-keyframes wheel{
    0%{
    opacity:1;
    left:-10%;
    -webkit-transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7;}
100%{
    left: 90%;
    opacity:1;
    -webkit-transform:scale(1) rotate(2160deg);
}
}
@-moz-keyframes wheel{
0%{
    opacity:1;
    left:-10%;
    -moz-transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7;}
100%{
    left: 90%;
    opacity:1;
    -moz-transform:scale(1) rotate(2160deg);
}
}
@-ms-keyframes wheel{
0%{
    opacity:1;
    left:-10%;
    -ms-transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7;}
100%{
    left: 90%;
    opacity:1;
    -ms-transform:scale(1) rotate(2160deg);
}
}

#colorWheel:hover {}
#colorWheel span {
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    border-style: solid;
    border-width: 150px 50px;
    box-sizing: border-box;
}
#colorWheel span.color01 {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color: #43a1cd transparent transparent transparent;
}
#colorWheel span.color02 {
    -webkit-transform: rotate(36deg);
    -moz-transform: rotate(36deg);
    -ms-transform: rotate(36deg);
    -o-transform: rotate(36deg);
    transform: rotate(36deg);
    border-color: #639b47 transparent transparent transparent;
}
#colorWheel span.color03 {
    -webkit-transform: rotate(72deg);
    -moz-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    -o-transform: rotate(72deg);
    transform: rotate(72deg);
    border-color: #9ac147 transparent transparent transparent;
}
#colorWheel span.color04 {
    -webkit-transform: rotate(108deg);
    -moz-transform: rotate(108deg);
    -ms-transform: rotate(108deg);
    -o-transform: rotate(108deg);
    transform: rotate(108deg);
    border-color: #e1e23b transparent transparent transparent;
}
#colorWheel span.color05 {
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    -o-transform: rotate(144deg);
    transform: rotate(144deg);
    border-color: #f7941e transparent transparent transparent;
}
#colorWheel span.color06 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color: #ba3e2e transparent transparent transparent;
}
#colorWheel span.color07 {
    -webkit-transform: rotate(216deg);
    -moz-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    -o-transform: rotate(216deg);
    transform: rotate(216deg);
    border-color: #9a1d34 transparent transparent transparent;
}
#colorWheel span.color08 {
    -webkit-transform: rotate(252deg);
    -moz-transform: rotate(252deg);
    -ms-transform: rotate(252deg);
    -o-transform: rotate(252deg);
    transform: rotate(252deg);
    border-color: #662a6c transparent transparent transparent;
}
#colorWheel span.color09 {
    -webkit-transform: rotate(288deg);
    -moz-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    -o-transform: rotate(288deg);
    transform: rotate(288deg);
    border-color: #272b66 transparent transparent transparent;
}
#colorWheel span.color10 {
    -webkit-transform: rotate(324deg);
    -moz-transform: rotate(324deg);
    -ms-transform: rotate(324deg);
    -o-transform: rotate(324deg);
    transform: rotate(324deg);
    border-color: #2d559f transparent transparent transparent;
}
#colorWheel:before {
    content: "";
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: absolute;
    top: -30px;
    left: -130px;
    border-radius: 100%;
    border: 30px solid #ffffff;
    z-index: 100;
    box-shadow:0px 0px 2px 12px rgba(180,180,180,.5)
}
#colorWheel:after {
    content: "";
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 100px;
    left: 0px;
    border-radius: 100%;
    box-shadow:0px 0px 2px 12px rgba(250,250,250,.5);
    background: #444 url(Dhiraj.png); background-size:contain
}

view demo

Your turn

I had already posted some articles of css3 @keyframes animation examples.  Please check some of these beautiful animation with demo below:

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!

Posted by: Dhiraj kumar

CSS3 3D effect, Shine text with css3 keyframe animation, Scrolling Page Background with jQuery – Happy New Year

On the occasion of New Year 2013, I thought to wish this festival by creating a nice webpage greeting. So, today I created this greeting card using 3D  and shining text effect with the help of CSS3, and scrolling background with JavaScript. I hope you all will enjoy this holiday as well as my web-card too :) .

Introduction

Greeting, today we are going to make a scrolling background effect. This script will move the background of any html tag, either vertically or horizontally. I used this script in one of my greeting card too which has a blue sky with clouds and it makes the whole website came alive. I think that’s pretty impressive. In this card you will find texts with different CSS effects like: 3D emboss, continuous spotlight shine effect, text shadow etc.

3d-shine-text-css3-scrolling-background-happy-new-year

The CSS

I have Used multiple text-shadows to create 3D text on any HTML element. No extra HTML, no extra headaches, just awesomesauce.
Works in the latest builds of Safari, Chrome, Firefox, and Opera.

h1 {
  margin:1.2em auto;
  font: bold 100px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
  -webkit-transition: .2s all linear;
}

Text shine Effect created with WebKit-specific CSS3 properties. You’ll need Safari or Chrome to enjoy key-frame animation.

p.shine{
    font-size: 3em;
    margin: 0 auto; padding:0;
    width: 95%;
}
.shine{
    background: #222 -webkit-gradient(linear, left top, right top, from(#ccc), to(#fff), color-stop(1, #f0f)) 0 0 no-repeat;
    background-size: 400px; -webkit-background-size: 400px; 
    -moz-background-size: 400px; -o-background-size: 400px;    
    color: rgba(255, 255, 255, 0.7);	
    background-clip: text; -webkit-background-clip: text; 
        -moz-background-clip: text; -o-background-clip: text;	
	-webkit-animation: shine 2s infinite;
	-moz-animation: shine 2s infinite;
	-o-animation: shine 2s infinite;
	-ms-animation: shine 2s infinite;
	animation: shine 2s infinite; 
}

@-webkit-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@-moz-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@-o-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}

For page background I used cloud in png format.

body{background:url(bg_clouds.png) 0 0}

The HTML

<h1>Happy New Year 2013</h1>
<p class="shine">The New Year is the time of unfolding horizons and the realization of dreams, may you rediscover new strength and garner faith with you, and be able to rejoice in the simple pleasures that life has to offer and put a brave front for all the challenges that may come your way.<br>
Wishing you a lovely New Year..</p>

The JavaScript – jQuery

We have to add jquery library in body first, after that we animate our page background with css background-position properties. I always prefer to use JavaScript files before close of body tag.

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">var scrollSpeed = 70; 
    var current = 0;
    function bgscroll(){
        current -= 1;   
        // move the background with backgrond-position css properties
        $('body').css("backgroundPosition", 1 ? current+"px 0" : "0 " + current+"px");   
    }
     setInterval(bgscroll, scrollSpeed);   </script>

view demo

Happy New Year!

I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!

Posted by: Dhiraj kumar

How to create a simple CSS3 loading animation

While playing DIRT 3, I’ve noticed a very cool triangle animation as part of their UI. Almost immediately, I thought about how to build a similar version of it using CSS3.

So, in this article you’ll see an experiment about how to create a simple CSS3 loading animation.

css3-loading-animation

For this example, I’ll be using two CSS3 animations: one that fades the color for the triangles and one animation that rotates the whole design. These two animations, synchronized, will help creating a quite nice effect.

The HTML

Initially, I wanted to use pseudo-elements in order to have less markup elements.

Here’s how the markup looks like:

<div class="loading-wrap">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
  <div class="triangle3"></div>
</div>

The CSS

There are some things you may find interesting here:

  • For a nice color fade across all three triangles, you need to increment the animation-delay.
  • Notice the gap between 20% and 100% for the rotation key-frames. This helps adding a stop effect for the animation.
.loading-wrap {
  width: 60px; height: 60px;
  position: absolute;
  top: 50%; left: 50%;
  margin: -30px 0 0 -30px;
  background: #777;
  animation: rotation ease-in-out 2s infinite;
  border-radius: 30px;
}

.triangle1, .triangle2, .triangle3 {
  border-width: 0 20px 30px 20px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #67cbf0;
  height: 0; width: 0;
  position: absolute;
  left: 10px; top: -10px;
  animation: fadecolor 2s 1s infinite;
}

.triangle2, .triangle3 {
  content: '';
  top: 20px; left: 30px;
  animation-delay: 1.1s;
}

.triangle3 {
  left: -10px;
  animation-delay: 1.2s;
}

@keyframes rotation {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}

@keyframes fadecolor {
    0% {border-bottom-color: #eee;}
    100%{border-bottom-color: #67cbf0;}
}

view demo

Browser support

Try using modern browsers like:

  • Chrome,
  • Firefox (Gecko),
  • Opera 12+,
  • Internet Explorer 10 or
  • Safari 5+.

Conclusion

This is an experiment and you must be aware of it. For now, I think an animated GIF will do the job better in most of cases.

Also, this isn’t that example that advocates for using CSS3 stuff instead images to save HTTP requests. It is not applicable here as limited browser support for CSS3 animations has something to say. Though, I hope you’ll find this example useful and inspiring for your future projects.

Thanks for reading and I’m looking forward to read your opinions!

Posted by: Dhiraj kumar