One evolution with CSS3 was the ability to write behaviors for transitions and animations. Front end developers have been asking for the ability to design these interactions within HTML and CSS, without the use of JavaScript or Flash, for years. Now their wish has come true.
Three.js three.js Demo, Code Snippets and Examples Handpicked three.js Demo, Code Snippets and Examples that you can use to find inspiration for your next web project. Three.js is a cross-browser JavaScript library/API that uses WebGL to create and display animated 3D computer graphics in a web browser. URL-encoding: ASCII Character%20: space%21:!%22: “%23: #%24: $%25:%%26: &%27: ‘%28: (%29: )%2A:.%2B: +%2C:,%2D: –%2E:.%2F. If you’re looking for 3D animated sliders with a smaller frame, check out this code snippet. It works via CSS3 transforms and really does feel like it’s embedded into the page in 3D space. Note that the images may also take a few seconds to load, so it may require some patience on your part.
- Close the Blinds. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari. Responsive: yes.
- These usually work on HTML elements as well as on 3D objects or on complete 3D scenes, see the tutorial and Simple Rotation. In the example below (and animation shown on the right) rotateMiddle(0.7,0.7,0) is used to rotate around the xy-axis and rotatePart (0,Math.PI.240) to perform 120 rotations (within the selected 2 hours).
With CSS3 transitions you have the potential to alter the appearance and behavior of an element whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted.
Animations within CSS3 allow the appearance and behavior of an element to be altered in multiple keyframes. Transitions provide a change from one state to another, while animations can set multiple points of transition upon different keyframes.
Transitions
As mentioned, for a transition to take place, an element must have a change in state, and different styles must be identified for each state. The easiest way for determining styles for different states is by using the :hover, :focus, :active, and :target pseudo-classes.
There are four transition related properties in total, including transition-property, transition-duration, transition-timing-function, and transition-delay. Not all of these are required to build a transition, with the first three are the most popular.
In the example below the box will change its background color over the course of 1 second in a linear fashion.
Transition Demo
See the Pen Transition by Shay Howe (@shayhowe) on CodePen.
Vendor Prefixes
The code above, as with the rest of the code samples in this lesson, are not vendor prefixed. This is intentionally un-prefixed in the interest of keeping the code snippet small and comprehensible. For the best support across all browsers, use vendor prefixes.
For reference, the prefixed version of the code above would look like the following.
Transitional Property
The transition-property property determines exactly what properties will be altered in conjunction with the other transitional properties. By default, all of the properties within an element’s different states will be altered upon change. However, only the properties identified within the transition-property value will be affected by any transitions.
In the example above, the background property is identified in the transition-property value. Here the background property is the only property that will change over the duration of 1 second in a linear fashion. Any other properties included when changing an element’s state, but not included within the transition-property value, will not receive the transition behaviors as set by the transition-duration or transition-timing-function properties.
If multiple properties need to be transitioned they may be comma separated within the transition-property value. Additionally, the keyword value all may be used to transition all properties of an element.
Transition Property Demo
See the Pen Transition Property by Shay Howe (@shayhowe) on CodePen.
Transitional Properties
It is important to note, not all properties may be transitioned, only properties that have an identifiable halfway point. Colors, font sizes, and the alike may be transitioned from one value to another as they have recognizable values in-between one another. The display property, for example, may not be transitioned as it does not have any midpoint. A handful of the more popular transitional properties include the following.
background-colorbackground-positionborder-colorborder-widthborder-spacingbottomclipcolorcropfont-sizefont-weightheightleftletter-spacingline-heightmarginmax-heightmax-widthmin-heightmin-widthopacityoutline-coloroutline-offsetoutline-widthpaddingrighttext-indenttext-shadowtopvertical-alignvisibilitywidthword-spacingz-index
Transition Duration
The duration in which a transition takes place is set using the transition-duration property. The value of this property can be set using general timing values, including seconds (s) and milliseconds (ms). These timing values may also come in fractional measurements, .2s for example.
When transitioning multiple properties you can set multiple durations, one for each property. As with the transition-property property value, multiple durations can be declared using comma separated values. The order of these values when identifying individual properties and durations does matter. For example, the first property identified within the transition-property property will match up with the first time identified within the transition-duration property, and so forth.
If multiple properties are being transitioned with only one duration value declared, that one value will be the duration of all the transitioned properties.
Transition Duration Demo
See the Pen Transition Duration by Shay Howe (@shayhowe) on CodePen.
Transition Timing
The transition-timing-function property is used to set the speed in which a transition will move. Knowing the duration from the transition-duration property a transition can have multiple speeds within a single duration. A few of the more popular keyword values for the transition-timing-function property include linear, ease-in, ease-out, and ease-in-out.
The linear keyword value identifies a transition moving in a constant speed from one state to another. The ease-in value identifies a transition that starts slowly and speeds up throughout the transition, while the ease-out value identifies a transition that starts quickly and slows down throughout the transition. The ease-in-out value identifies a transition that starts slowly, speeds up in the middle, then slows down again before ending.
Each timing function has a cubic-bezier curve behind it, which can be specifically set using the cubic-bezier(x1, y1, x2, y2) value. Additional values include step-start, step-stop, and a uniquely identified steps(number_of_steps, direction) value.
When transitioning multiple properties, you can identify multiple timing functions. These timing function values, as with other transition property values, may be declared as comma separated values.
Transition Timing Demo
See the Pen Transition Timing by Shay Howe (@shayhowe) on CodePen.
Transition Delay
On top of declaring the transition property, duration, and timing function, you can also set a delay with the transition-delay property. The delay sets a time value, seconds or milliseconds, that determines how long a transition should be stalled before executing. As with all other transition properties, to delay numerous transitions, each delay can be declared as comma separated values.
Transition Delay Demo
See the Pen Transition Delay by Shay Howe (@shayhowe) on CodePen.
Shorthand Transitions
Declaring every transition property individually can become quite intensive, especially with vendor prefixes. Fortunately there is a shorthand property, transition, capable of supporting all of these different properties and values. Using the transition value alone, you can set every transition value in the order of transition-property, transition-duration, transition-timing-function, and lastly transition-delay. Do not use commas with these values unless you are identifying numerous transitions.
To set numerous transitions at once, set each individual group of transition values, then use a comma to separate each additional group of transition values.
Shorthand Transitions Demo
See the Pen Shorthand Transitions by Shay Howe (@shayhowe) on CodePen.
Transitional Button
HTML
CSS
Demo
See the Pen Transitional Button by Shay Howe (@shayhowe) on CodePen.
Card Flip
HTML
CSS
Demo
See the Pen Card Flip by Shay Howe (@shayhowe) on CodePen.
Animations
Transitions do a great job of building out visual interactions from one state to another, and are perfect for these kinds of single state changes. However, when more control is required, transitions need to have multiple states. In return, this is where animations pick up where transitions leave off.
Animations Keyframes
To set multiple points at which an element should undergo a transition, use the @keyframes rule. The @keyframes rule includes the animation name, any animation breakpoints, and the properties intended to be animated.
Vendor Prefixing the Keyframe Rule
The @keyframes rule must be vendor prefixed, just like all of the other transition and animation properties. The vendor prefixes for the @keyframes rule look like the following:
@-moz-keyframes@-o-keyframes@-webkit-keyframes
The animation above is named slide, stated directly after the opening @keyframes rule. The different keyframe breakpoints are set using percentages, starting at 0% and working to 100% with an intermediate breakpoint at 50%. The keywords from and to could be used in place of 0% and 100% if wished. Additional breakpoints, besides 50%, may also be stated. The element properties to be animated are listed inside each of the breakpoints, left and top in the example above.
It is important to note, as with transitions only individual properties may be animated. Consider how you might move an element from top to bottom for example. Trying to animate from top: 0; to bottom: 0; will not work, because animations can only apply a transition within a single property, not from one property to another. In this case, the element will need to be animated from top: 0; to top: 100%;.
Animations Keyframes Demo
Hover over the ball below to see the animation in action.
See the Pen Animations Keyframes by Shay Howe (@shayhowe) on CodePen.
Animation Name
Once the keyframes for an animation have been declared they need to be assigned to an element. To do so, the animation-name property is used with the animation name, identified from the @keyframes rule, as the property value. The animation-name declaration is applied to the element in which the animation is to be applied to.
Using the animation-name property alone isn’t enough though. You also need to declare an animation-duration property and value so that the browser knows how long an animation should take to complete.
Animation Duration, Timing Function, & Delay
Once you have declared the animation-name property on an element, animations behave similarly to transitions. They include a duration, timing function, and delay if desired. To start, animations need a duration declared using the animation-duration property. As with transitions, the duration may be set in seconds or milliseconds.
A timing function and delay can be declared using the animation-timing-function and animation-delay properties respectively. The values for these properties mimic and behave just as they do with transitions.
The animation below should cause the ball to bounce once while moving to the left, however only when hovering over the stage.
HTML
CSS
Animation Demo
Hover over the ball below to see the animation in action.
See the Pen Animation by Shay Howe (@shayhowe) on CodePen.
Customizing Animations
Animations also provide the ability to further customize an element’s behavior, including the ability to declare the number of times an animation runs, as well as the direction in which an animation completes.
Animation Iteration
By default, animations run their cycle once from beginning to end and then stop. To have an animation repeat itself numerous times the animation-iteration-count property may be used. Values for the animation-iteration-count property include either an integer or the infinite keyword. Using an integer will repeat the animation as many times as specified, while the infinite keyword will repeat the animation indefinitely in a never ending fashion.
Animation Iteration Demo
Hover over the ball below to see the animation in action.
See the Pen Animation Iteration by Shay Howe (@shayhowe) on CodePen.
Animation Direction
On top of being able to set the number of times an animation repeats, you may also declare the direction an animation completes using the animation-direction property. Values for the animation-direction property include normal, reverse, alternate, and alternate-reverse.
The normal value plays an animation as intended from beginning to end. The reverse value will play the animation exactly opposite as identified within the @keyframes rule, thus starting at 100% and working backwards to 0%.
The alternate value will play an animation forwards then backwards. Within the keyframes that includes running forward from 0% to 100% and then backwards from 100% to 0%. Using the animation-iteration-count property may limit the number of times an animation runs both forwards and backwards. The count starts at 1 running an animation forwards from 0% to 100%, then adds 1 running an animation backwards from 100% to 0%. Combining for a total of 2 iterations. The alternate value also inverses any timing functions when playing in reverse. If an animation uses the ease-in value going from 0% to 100%, it then uses the ease-out value going from 100% to 0%.
Lastly, the alternate-reverse value combines both the alternate and reverse values, running an animation backwards then forwards. The alternate-reverse value starts at 100% running to 0% and then back to 100% again.
Animation Direction Demo
Hover over the ball below to see the animation in action.
See the Pen Animation Direction by Shay Howe (@shayhowe) on CodePen.
Animation Play State
The animation-play-state property allows an animation to be played or paused using the running and paused keyword values respectively. When you play a paused animation, it will resume running from its current state rather than starting from the very beginning again.
In the example below the animation-play-state property is set to paused when making the stage active by clicking on it. Notice how the animation will temporarily pause until you let up on the mouse.
Animation Play State Demo
Hover over the ball below to see the animation in action. Click to pause the animation.
See the Pen Animation Play State by Shay Howe (@shayhowe) on CodePen.
Animation Fill Mode
The animation-fill-mode property identifies how an element should be styled either before, after, or before and after an animation is run. The animation-fill-mode property accepts four keyword values, including none, forwards, backwards, and both.
The none value will not apply any styles to an element before or after an animation has been run.
The forwards value will keep the styles declared within the last specified keyframe. These styles may, however, be affected by the animation-direction and animation-iteration-count property values, changing exactly where an animation ends.
The backwards value will apply the styles within the first specified keyframe as soon as being identified, before the animation has been run. This does include applying those styles during any time that may be set within an animation delay. The backwards value may also be affected by the animation-direction property value.
Lastly, the both value will apply the behaviors from both the forwards and backwards values.
Animation Fill Mode Demo
Hover over the ball below to see the animation in action. Click to pause the animation.
See the Pen Animation Fill Mode by Shay Howe (@shayhowe) on CodePen.
Shorthand Animations
Fortunately animations, just like transitions, can be written out in a shorthand format. This is accomplished with one animation property, rather than multiple declarations. The order of values within the animation property should be animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and lastly animation-play-state.
Shorthand Animations Demo
Hover over the ball below to see the animation in action. Click to pause the animation.
See the Pen Shorthand Animations by Shay Howe (@shayhowe) on CodePen.
Resources & Links
- Understanding CSS3 Transitionsvia A List Apart
- CSS Cubic-Bezier Buildervia Rob LaPlaca
- The Guide To CSS Animation: Principles and Examplesvia Smashing Magazine
- Using CSS Animationsvia Mozilla Developer Network
August 22, 2015
Using the CSS border-radius property, we can create rounded shapes and circles. Add some gradients and they become spheres. Let’s try that, and add some animation to bring them to life.
Flat design
There are two ways we could approach making spheres with CSS.
One is to create an actual 3D sphere using lots of elements. There are some beautifulexamples of these. A potential downside though is that these require the browser display many elements, which can impact performance. They also tend to look a bit rough as a smooth sphere would require many elements.
Instead of this I’ll try a second approach, making use of CSS gradients to add shading and create the 3D effect on a single element.
Demo and source code
All the examples mentioned can be found via my Codepen account, or by selecting the “Edit on Codepen” links in each example below.
In the code examples, I’ve left out any browser prefixes. I’d recommend using a tool like Autoprefixer, or add in prefixes as needed.
Basic shape
Before adding details, we’ll create the initial circle shape. Begin with the HTML:
We’re using an figure element here, but it could be any element. Figure is an element used in HTML5 to represent an image or diagram that is a part of the content that could be removed without affecting the content’s meaning.
To create a circle from this figure element, I’ll give it a width and height, and a border radius of 50%. Anything over 50% will result in a fully rounded corner.
A circle appears.
Now that we have a basic circle, we can start to style it up into something more spherical.
Shading 101
The first thing most 3D-sphere tutorials do is add a single radial gradient, slight up and to the left of the center of a circle.
We can do this using the following CSS:
You should get something like this:
Radial gradients
Html Code For Forward Slash
The radial-gradient property takes a few arguments. The first is the center position for the start of the gradient. This follows the form *shape* at *position*. In this case case, it’s a circle with it’s center position 100 pixels in from the left and 100 pixels from the top.
Next a series of colours is specified. You can specify more than two colours, but it is then necessary to include a distance with each one so that the gradient knows when to blend each colour into the next.
In this example just two colours are specified. This lets the browser assumes the first is 0% and the latter is 100%, and it draws the gradient between these to colours. If we wanted other steps in the gradient, we could specify distances in pixels or percentages, as you’ll see later.
So we have something that looks a bit 3D-ish. It’s ok, but let’s try to make it look a bit nicer.
Shadows & 3D
Depending on what sort shading you apply to the surface, you can create different looking spheres. First though let’s set up a scene to place the ball in.
The HTML we’ll use for this has a couple more elements:
The “ball” element has been given a span which we’ll use to create a shadow, and it has been wrapped in a stage div. The stage div is useful when we want to set some perspective and position the shadow, making it look more 3D.
Apply some styles to the stage and position a shadow to set the scene.
Note that I’m not showing prefixes in this examples CSS. The Codepen examples contain fully prefixed CSS. In the above I set up the stage div to have perspective of 1,200 pixels. The perspective property is like the vanishing point in a 3D scene.
The ball’s shadow is then placed by giving it a radial gradient, but then positioning it using a transform. Transforms in CSS let you rotate, scale, move or skew things in a 3D space. The shadow is rotated 90 degrees on the X axis, and then is pulled down 150 pixels to the base of the ball.
Since we established a perspective value on the stage container, we end up looking down on it and can see it as a stretched oval shape.
It’s starting to look a bit better now. Let’s add more shading to the ball itself.
Multiple shaders
Very rarely in the real world would you find objects lit from just one angle. Surfaces reflect light onto other surfaces and the end results in various light sources mixed together. To create a more realistic looking ball, we’ll make it look light there are two light sources by using a pseudo-element to add two gradients.
Here we have two slightly more complex gradients.
The first gradient is a subtle under-lighting effect and it applied to the ball element. The center of the gradient is positioned half-way across and at 120% of the ball’s height. This places the center off the ball’s surface. I did this so that the sharp ending colour wasn’t visible, resulting in a smoother gradient.
The second gradient is a highlight, placed at the top. It’s set to be 90% of the ball’s width and 90% of its height. The gradient is centered at the top so that it fades out at around halfway down the ball.
I’ve used the before pseudo-element rather than create a new element to contain the shading.
Since this highlight gradient has a sharp edge, I’ve made use of the blur effect to soften the highlight. Unfortunately this is currently only a webkit feature (Chrome and Safari) but it may be more useful in future across other browsers.
Both gradients combine to create a much nicer effect:
Shinier
The effect so far is quite soft, so let’s add some shine and create something more like a snooker ball.
To achieve this we’ll make use of a soft under light as before, but adjust the top highlight to be smaller and sharper. We’ll need to make use of two psuedo-selectors to contain the ball’s colour, a bottom highlight and a reflection.
Here we have the initial colour being applied as a subtle gradient on the ball itself. The before pseudo-element contains a lighter highlight, which again starts at the bottom of the ball and creates the effect of reflected light from the surface.
The new addition here is the after psuedo-selector. It contains a circular gradient that starts almost opaque white at the center, and fades to transparent at around the 24% mark. This creates a white shiny effect, but to make it look like it’s reflecting off a three dimensional object, we apply a CSS transform.
The transform moves the shine effect left 80 pixels then up 90 pixels, and to adds a skew effect. The skew effect stretches the circle along the X-axis, so that it looks more like the sheen you’d find on a shiny ball.
8-ball
While we’re making a pool ball, let’s go the extra step and add the number 8.
We’ll need an extra element to contain the 8, as well as some styles to place it on the ball.
The 100% border radius is again used to create a circle, and this circle is positioned at the top right using the transform property. Rather that put the number 8 into the content, I’m using the before psuedo-selector to add the content via CSS, and then skewing the number in a similar way to the containing circle.
The result is a shiny 8-ball.
Got my eye on you
One of the great things about CSS transforms is that they can be animated. Using CSS keyframes for animation, you can describe a series of transforms as an animation and apply that to an element. To show this, I’ll create and animate an eyeball.
First step is to adjust some of the colours use in the 8-ball example. A few tweaks and it’s looking a lot more like an eye. First, the HTML:
The bulk of the CSS is similar to the 8-ball, with the exception of the iris and pupil parts.
A blue gradient forms the coloured part of the iris, and then the pupil and a highlight are created as pseudo-elements. I’ve also added the animation property to the iris element. Animations are attached to elements using a format like this:
In this case we’d be applying an animation called “animation-name”, setting it to last 5 seconds, loop indefinitely, and applying an easing value of “ease-out”. Ease-out is when the animation slows down as it reaches the end, creating a more natural effect.
Without the animation yet created, we have a very static eyeball.
Lets create some keyframes to describe how the eyeball should move.
Html Code For 3d Animation Games
Animation keyframes in CSS can seem tricky at first. What you’re doing is describing the state of the element at a series of stages. Each state is mapped to a percentage. In this case the iris will begin with no transforms applied. Then at 20%, a transform will apply in which it is moved and skewed to the left. The gap between 0 and 20% is automatically calculated by the browser, creating a smooth transition between these two points.
This continues across each of the keyframes, and the entire animation in this case takes 5 seconds, as specified earlier.
Don’t forget to create moz, ms, o and non-prefixed versions of keyframe animations as some browsers need the prefixes.
Bubbles
Using a combination of shading and animation can produce all sorts of interesting and varied effects. How about some bubbles?
Creating the bubble look is similar to before, using more transparency in the main colour and two pseudo-elements to add shine.
The animation makes use of the scale transform to make the entire bubble wobble.
The animation applies to the entire bubble and its pseudo-elements.
Create 3d Animation Free Online
Using images
So far all the balls have been created without using any images. Applying a background image can add more detail, and still take advantage of the CSS shading within the pseudo-elements. For example, an unshaded texture of a tennis ball:
Adding some CSS gradients can create the illusion of depth.
Around the world
Animation can also be applied to the position of background images. Using this we can create a spinning globe.
This flat image was stretched a little at the top and bottom to be used as a background image.
With some shading and animation added, a 3D-style globe can be created. Select “Result” in this Codepen to see it in action. I’ve set it to display the HTML by default as the performance on this example was pretty slow, causing the fan to kick in on my development laptop.
Note: Many thanks to Sidoruk Sergey (@Sidoruk_SV) for upgrading this globe. It’s looking great.
Resources
Some good info about radial gradients in case you’d like to know more.
Looking for more 3D examples? Check out Portal CSS for inspiration.
Feedback
All the examples mentioned can be found via my Codepen account. Many thanks to Chris and the team for making such a fantastic resource.
If you have any questions about the above, get in touch by email or on Twitter.
Comments are closed.