admin posted: " We've gotten pretty used to seeing animations on websites and enjoying the energy and variety they bring to web design. They're eye catching, a great way to add some visual interest to a site, and generally make the experience more exciting for your user"
We've gotten pretty used to seeing animations on websites and enjoying the energy and variety they bring to web design. They're eye catching, a great way to add some visual interest to a site, and generally make the experience more exciting for your users.
While traditionally achieved with GIFs, SVGs, WebGL, and background videos, animations can also be efficiently created with CSS. Browser support for CSS animations has greatly improved and is becoming quite popular — compatible browsers include Firefox 5+, IE 10+, Chrome, Safari 4+, and Opera 12+.
Today I'll walk you through the basics of creating a CSS animation with a step-by-step demo. Stick around after that and check out five examples of animations. You'll be able to use all these ideas to create animations for your own projects!
CSS animation basics
Obviously, it's important to cover the basics of how animations work before we dive into the five fun CSS animations. For example, keyframes are a key component to CSS animations. You may be familiar with that term if you've worked with Adobe Flash or have experience with video editing. In that case, the term keyframe is just what you would think: it's a way to specify a certain action.
You may have come across @keyframes in a CSS stylesheet before. Inside this @keyframes is where you define the styles and stages for the animation. Here's a great example of a fadeout effect:
The basics of the fadeout keyframe we just created include:
A descriptive name: in this case, fadeOut.
Stages of the animation: From was set to 0% and To was set to 100%.
CSS styles that will be applied at each stage.
By default, the From will be at 0% and the To will be at 100%, since no other stages are specified in this example.
Specific actions with animation subproperties
We need to do a little more to style things — we need to style the animation property with subproperties. If keyframes define what the animation will look like, then animation sub-properties define specific rules for the animation. These let you configure the timing, duration, and other key details of how the animation sequence should progress.
The animation property is used to call @keyframes inside a CSS selector. Animations can and will often have more than one subproperty. Here are examples of subproperties:
Animation-name: name of the @keyframes at-rule, which describes the animation's keyframes. The name fadeOut in the previous example is an example of animation-name.
Animation-duration: length of time that an animation should take to complete one full cycle.
Animation-timing-function: timing of the animation, specifically how the animation transitions through keyframes. This function has the ability to establish acceleration curves. Examples are linear, ease, ease-in, ease-out, ease-in-out, or cubic-bezier.
Animation-delay: delay between the time the element is loaded and the beginning of the animation.
Animation-iteration-count: number of times the animation should repeat. Want the animation to go on forever? You can specify infinite to repeat the animation indefinitely.
Animation-direction: whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
Animation-fill-mode: values that are applied by the animation both before and after has executed.
Animation-play-state: with this option, you are able to pause and resume the animation sequence. Examples are none, forwards, backwards, or both.
Putting it all together for best browser support
There's a lot going on here, and the terminology can be a bit confusing. But we now know that keyframes define what the animation will look like as well as different animation stages, and that the animation property uses subproperties to define animation options like delay, direction, timing, and so on.
You are probably familiar with vendor or browser prefixes — those are necessary when working with animations. We need to make sure that we have the best browser support. Here are the standard browser prefixes:
Chrome & Safari: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
Internet Explorer 10 does not require a prefix for transitions, but all transforms require the prefix. Opera is covered because it recognises WebKit styles.
Transition start
-webkit-transition
-moz-transition
transition
Transform start:
-webkit-transform
-moz-transform
-ms-transform
transform
Five animations in action
Now that we've covered the basics, let's create some code to put to use!
Animation One: circle to square
Let's go detailed on this first one, so we can make sure we understand all the concepts we've covered so far. The animation will start out as a circle and morph into a square.
Creating a div to start with is a great way to test out the animation:
<div class="boxAnimation"></div>
Now let's get our @keyframes set up. This animation will have five stages because a square has four sides and we need to have a 0% starting point. Use prefixes, as shown below, but for the rest of the tutorial we'll keep it simple with just the basics.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.