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

Random 3D Explosions, 3D clouds – Effects with CSS 3D and jQuery

Introduction

This tutorial will try to guide you through the steps to create a 3D-like, explosions in sky or billboard-based clouds. There are a few advanced topics, mainly how 3D transformations via CSS properties work. If you want to find more information, this is a nice place to begin.

If you’re in a hurry, just check the final result.

css-3d-explosive-clouds

The tutorial is divided into sections, each with a different step to understand and follow the process, with HTML, CSS and Javascript blocks. Each step is based on the previous one, and has a link to test the code. The code in the tutorial is a simplified version of the demos, but the main differences are documented on every section.

HTML

First, we need two div elements: viewport and world. All the rest of the elements will be dynamically created.

Viewport covers the whole screen and acts as the camera plane. Since in CSS 3D Transforms there is no camera per se, think of it as a static sheet of glass through which you see a world that changes orientation relative to you. We’ll position all our world objects (or scene) inside it, and that’s what will be transformed around.

World is a div that we are going to use to anchor all our 3D elements. Transforming (rotating, translating or scaling) world will transform all our elements. For brevity and from here on, I’m using non-prefixed CSS properties. Use the vendor prefix (-webkit, -moz, -o, -ms, etc.) where appropriate.

This is all the markup we’ll need:

<div id="viewport">
    <div id="world"></div>
</div>

CSS

These next are our two CSS definitions. It’s very important to center the div that contains our scene (world in our case) in the viewport, or the scene will be rendered with an offset! Remember that you are still rotating an element that is positioned inside the document, exactly like any other 2D element.

#viewport {
	-webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; 
	position: absolute; 
	left: 0; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	overflow: hidden;
	background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.28, rgb(69,132,180)),
			color-stop(0.64, rgb(31,71,120))
	);
}

#world {
	position: absolute; 
	left: 50%; 
	top: 50%; 
	margin-left: -256px; 
	margin-top: -256px; 
	height: 512px; 
	width: 512px; 
	-webkit-transform-style: preserve-3d; 
	-moz-transform-style: preserve-3d; 
	-o-transform-style: preserve-3d; 
	pointer-events: none;
}

CSS For Adding Clouds Base

Now we start adding real 3D content. We add some new div which are positioned in the space, relatively to world. It’s esentially adding several absolute-positioned div as children of world, but using translate in 3 dimensions instead of left and top. They are centered in the middle of world by default. The width and height don’t really matter, since these new elements are containers for the actual cloud layers. For commodity, it’s better to center them (by setting margin-left and margin-top to negative half of width and height).

.cloudBase {
		position: absolute; 
		left: 256px; 
		top: 256px; 
		width: 20px; 
		height: 20px; 
		margin-left: -10px; 
		margin-top: -10px
	}

CSS for Clouds Layer

Now things start getting interesting. We add several absolute-positioned .cloudLayer div elements to each .cloudBase. These will hold our cloud textures.

.cloudLayer {
		position: absolute; 
		left: 50%; 
		top: 50%; 
		width: 256px; 
		height: 256px; 
		margin-left: -128px; 
		margin-top: -128px; 
		-webkit-transition: opacity .5s ease-out; 
		-moz-transition: opacity .5s ease-out; 
		-o-transition: opacity .5s ease-out;
	}

jQuery (JavaScript)

We add generate() and createCloud() functions to populate world. Note that random_{var} are not real variables but placeholder names for the real code, which should return a random number between the specified range.

var layers = [],
	objects = [],
	textures = [],

	world = document.getElementById( 'world' ),
	viewport = document.getElementById( 'viewport' ),

	d = 0,
	p = 400,
	worldXAngle = 0,
	worldYAngle = 0,
	computedWeights = [];

	viewport.style.webkitPerspective = p;
	viewport.style.MozPerspective = p;
	viewport.style.oPerspective = p;
	textures = [
		{ name: 'white cloud', 	file: 'cloud.png'	, opacity: 1, weight: 0 },
		{ name: 'dark cloud', 	file: 'darkCloud.png'	, opacity: 1, weight: 0 },
		{ name: 'smoke cloud', 	file: 'smoke.png'	, opacity: 1, weight: 0 },
		{ name: 'explosion', 	file: 'explosion.png'	, opacity: 1, weight: 0 },
		{ name: 'explosion 2', 	file: 'explosion2.png'	, opacity: 1, weight: 0 },
		{ name: 'box', 		file: 'box.png'		, opacity: 1, weight: 0 }
	];

	function setTextureUsage( id, mode ) {
		var modes = [ 'None', 'Few', 'Normal', 'Lot' ];
		var weights = { 'None': 0, 'Few': .3, 'Normal': .7, 'Lot': 1 };
		for( var j = 0; j < modes.length; j++ ) {
			var el = document.getElementById( 'btn' + modes[ j ] + id );
			el.className = el.className.replace( ' active', '' );
			if( modes[ j ] == mode ) {
				el.className += ' active';
				textures[ id ].weight = weights[ mode ];
			}
		}
	}
	setTextureUsage( 0, 'Few' );
	setTextureUsage( 1, 'Few' );
	setTextureUsage( 2, 'Normal' );
	setTextureUsage( 3, 'Lot' );
	setTextureUsage( 4, 'Lot' );

	generate();

	function createCloud() {

		var div = document.createElement( 'div'  );
		div.className = 'cloudBase';
		var x = 256 - ( Math.random() * 512 );
		var y = 256 - ( Math.random() * 512 );
		var z = 256 - ( Math.random() * 512 );
		var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px )';
		div.style.webkitTransform = t;
		div.style.MozTransform = t;
		div.style.oTransform = t;
		world.appendChild( div );

		for( var j = 0; j < 5 + Math.round( Math.random() * 10 ); j++ ) {
			var cloud = document.createElement( 'img' );
			cloud.style.opacity = 0;
			var r = Math.random();
			var src = 'troll.png';
			for( var k = 0; k < computedWeights.length; k++ ) { 
				if( r >= computedWeights[ k ].min && r <= computedWeights[ k ].max ) { 					
( function( img ) { img.addEventListener( 'load', function() {
 						img.style.opacity = .8;
					} ) } )( cloud );
 					src = computedWeights[ k ].src; 
}} 
cloud.setAttribute( 'src', src ); 
cloud.className = 'cloudLayer'; 		 			
var x = 256 - ( Math.random() * 512 ); 
var y = 256 - ( Math.random() * 512 ); 
var z = 100 - ( Math.random() * 200 ); 
var a = Math.random() * 360; 
var s = .25 + Math.random(); 
x *= .2; y *= .2; 
cloud.data = {x: x, y: y, z: z, a: a, s: s, speed: .1 * Math.random()}; 
var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px ) rotateZ( ' + a + 'deg ) scale( ' + s + ' )'; 
cloud.style.webkitTransform = t; 
cloud.style.MozTransform = t; 			
cloud.style.oTransform = t; 			
div.appendChild( cloud ); 			
layers.push( cloud ); 		} 		 		
return div; 	 	
function generate() { 		
objects = []; 		
if ( world.hasChildNodes() ) { 			
while ( world.childNodes.length >= 1 ) {
				world.removeChild( world.firstChild );       
			} 
		}
		computedWeights = [];
		var total = 0;
		for( var j = 0; j < textures.length; j++ ) { 			
if( textures[ j ].weight > 0 ) {
				total += textures[ j ].weight;
			}
		}
		var accum = 0;
		for( var j = 0; j < textures.length; j++ ) { 			
if( textures[ j ].weight > 0 ) {
				var w = textures[ j ].weight / total;
				computedWeights.push( {
					src: textures[ j ].file,
					min: accum,
					max: accum + w
				} );
				accum += w;
			}
		}
		for( var j = 0; j < 5; j++ ) {
			objects.push( createCloud() );
		}
	}

Result

For the final effect, we fill cloudLayer div for an img with a cloud texture. The textures should be PNG with alpha channel to get the effect right.

css-3d-explosive-clouds

Conclusion

Of course, you can use any texture or set of textures you want: smoke puffs, plasma clouds, green leaves, flying toasters… Just change the background-image that a specific kind of cloud layer uses. Mixing different textures in different proportions gives interesting results.

Adding elements in random order is fine, but you can also create ordered structures, like trees, duck-shaped clouds or complex explosions. Try following a 3D curve and create solid trails of clouds. Create a multiplayer game to guess the shape of a 3D cloud. The possibilities are endless!

I hope it’s been an interesting tutorial and not too hard to follow.

view demo

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

Posted by: Dhiraj kumar