{"id":22004,"date":"2017-03-21T12:00:21","date_gmt":"2017-03-21T17:00:21","guid":{"rendered":"https:\/\/getflywheel.com\/?p=22004"},"modified":"2024-09-29T11:55:45","modified_gmt":"2024-09-29T16:55:45","slug":"css3-transitions-transforms-create-animations","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/css3-transitions-transforms-create-animations\/","title":{"rendered":"How to Use CSS3 Transitions and Transforms to Create Animations"},"content":{"rendered":"\n

Editor\u2019s note: This guest post was written by Abbey Fitzgerald<\/a> a UX software engineer and web designer who loves the art of crafting code.<\/em><\/p>\n\n\n\n

Interesting animations can be created with CSS3 by using transforms and transitions. Transforms are used to make an element change from one state to another. Examples would be rotating, moving, skewing, and scaling elements. Without a transition, an element being transformed would change abruptly from one state to another. To prevent this, a transition can be added so you can control the change, making it look smoother.<\/p>\n\n\n\n

How to use CSS3\u00a0transforms<\/h2>\n\n\n\n

There are a few types of commonly used transforms. We\u2019ll focus on 2D examples for this tutorial, but it\u2019s good to be aware that cool things can be done with 3D transforms, too. (Once you\u2019ve mastered 2D, 3D will be much easier!)<\/p>\n\n\n\n

In the following examples, the original rectangles are in a darker green and the transformed are a bit more transparent.<\/p>\n\n\n\n

Translate<\/h3>\n\n\n\n

The translate()<\/code> method moves an element from its current position to a new one.
With this code, the adjusted rectangle is moved 40 pixels to the right, and 100 pixels down from the current position.<\/p>\n\n\n\n

\"css3-transitions-transforms-translate\"<\/figure>\n\n\n\n
\n -ms-transform: translate(40px, 100px); \/* IE 9 *\/\n    -webkit-transform: translate(40px, 100px); \/* Safari *\/\n    transform: translate(40px, 100px);<\/code><\/pre>\n\n\n\n
Rotate<\/h3>\n\n\n\n
The rotate()<\/code> method rotates an element clockwise or counter-clockwise by the specified degree value. This code rotates the rectangle clockwise by 40 degrees.<\/p>\n\n\n\n
\"css3-transitions-transforms-rotate\"<\/figure>\n\n\n\n
-ms-transform: rotate(40deg); \/* IE 9 *\/\n    -webkit-transform: rotate(40deg); \/* Safari *\/\n    transform: rotate(40deg);<\/code><\/pre>\n\n\n\n
Scale<\/h3>\n\n\n\n
The scale()<\/code> method increases or decreases the size of an element (according to the parameters given for the width and height). In this example, the adjusted rectangle is two times larger than its original width and three times larger than its original height.<\/p>\n\n\n\n
\"css3-transitions-transforms-scale\"<\/figure>\n\n\n\n
-ms-transform: scale(2, 3); \/* IE 9 *\/\n    -webkit-transform: scale(2, 3); \/* Safari *\/\n    transform: scale(2, 3);<\/code><\/pre>\n\n\n\n
SkewX<\/h3>\n\n\n\n
With skewX()<\/code>, only the x-axis will be affected. This rectangle is skewed 30 degrees along the x-axis:<\/p>\n\n\n\n
\"css3-transitions-transforms-skew-x\"<\/figure>\n\n\n\n
\n  -ms-transform: skewX(30deg); \/* IE 9 *\/\n    -webkit-transform: skewX(30deg); \/* Safari *\/\n    transform: skewX(30deg);<\/code><\/pre>\n\n\n\n
SkewY<\/h3>\n\n\n\n
This is the same idea, but on the y-axis. The skewY()<\/code> method skews an element along the y-axis by the defined angle. This rectangle is skewed 30 degrees along the y-axis.<\/p>\n\n\n\n
\"css3-transitions-transforms-skew-y\"<\/figure>\n\n\n\n
\n-ms-transform: skewY(30deg); \/* IE 9 *\/\n    -webkit-transform: skewY(30deg); \/* Safari *\/\n    transform: skewY(30deg);\n}<\/code><\/pre>\n\n\n\n
Skew<\/h3>\n\n\n\n
If you want to skew both the x and y-axis, this can be done in one place. The skew()<\/code> method skews an element along the x and y-axis using the specified angles. The following example skews the rectangle element 30 degrees along the x-axis and 20 degrees along the x-axis.<\/p>\n\n\n\n
\"css3-transitions-transforms-skew\"<\/figure>\n\n\n\n
\n-ms-transform: skew(30deg, 20deg); \/* IE 9 *\/\n    -webkit-transform: skew(30deg, 20deg); \/* Safari *\/\n    transform: skew(30deg, 20deg);<\/code><\/pre>\n\n\n\n
Matrix<\/h3>\n\n\n\n
This is where things get interesting, but also more efficient in the right situation. If you are doing a lot of transforms and don\u2019t want to write them out all individually, these 2D transforms can be combined with the matrix()<\/code> method.<\/p>\n\n\n\n
Here\u2019s a basic outline to follow:<\/p>\n\n\n\n
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())<\/code><\/p>\n\n\n\n
Just a heads up, it takes some research to come up with the values in the matrix. Here is a helpful guide<\/a> to get started.<\/p>\n\n\n\n
\"css3-transitions-transforms-matrix\"<\/figure>\n\n\n\n
To make this example, here are the matrix values:<\/p>\n\n\n\n
\n  -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); \/* IE 9 *\/\n    -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); \/* Safari *\/\n    transform: matrix(2, -0.3, 0, 1, 0, 0);<\/code><\/pre>\n\n\n\n
How to use CSS3 transitions<\/h2>\n\n\n\n
Now that transforms have been covered, it\u2019s important to note that they are frequently used with transitions. This will make more sense in the following design examples.<\/p>\n\n\n\n
It\u2019s good to keep in mind that values can be customized to make the transition between two states of an element just how you would like. Think of it as a way to control animation speed when changing CSS properties. One example that you\u2019ve probably come across is if you hover over a button. It\u2019s common to see a \u201cslow darkening\u201d rather than just a quick instant darker color when you hover over it. This \u201cslow darkening\u201d was created with a transition.<\/p>\n\n\n\n
If you are specifying a lot of values, shorthand will come in handy. The transition<\/code> CSS property is a shorthand property for transition-property<\/code>, transition-duration<\/code>, transition-timing-function<\/code>, and transition-delay<\/code>.<\/p>\n\n\n\n
Transition details<\/h3>\n\n\n\n
The transition-property<\/code> specifies the CSS property where the transition will be applied, since you can apply a transition to an individual property. Examples of applying a transition to an individual property would be on a background or a transform. If you would like to target all the properties on the site, the transform property can be set to all<\/code>.<\/p>\n\n\n\n
The transition-duration<\/code> is helpful to have the changes in a property to take place over a specified time rather than immediately. You\u2019ll see seconds and milliseconds as the possible values.<\/p>\n\n\n\n
transition-duration: 7s;\ntransition-duration: 120ms;\ntransition-duration: 2s, 3s;\ntransition-duration: 10s, 30s, 230ms;<\/code><\/pre>\n\n\n\n
The transition-timing-function<\/code> CSS property lets you establish an acceleration curve, so that the speed of the transition can vary over its duration. There are many options to experiment with.<\/p>\n\n\n\n
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;<\/code><\/pre>\n\n\n\n
The transition-delay<\/code> is pretty self-explanatory. A specified value sets the number of seconds or milliseconds to wait before the transition effect will start. Initial<\/code> will set the property to its default value. If inherit<\/code> is specified, this means that it inherits the property from its parent element.<\/p>\n\n\n\n
Here are all the properties:\ntransition-property: background; \/\/all\n  transition-duration: 1s;\n  transition-timing-function: linear; \/\/other options are ease\n  transition-delay: 0.5s;<\/code><\/pre>\n\n\n\n
Here\u2019s the basic shorthand setup for a transition:<\/p>\n\n\n\n
div {\n  transition: [property] [duration] [timing-function] [delay];\n}<\/code><\/pre>\n\n\n\n
The full shorthand sequence:<\/p>\n\n\n\n
div {\n  transition: background 1s linear 0.5s;\n}<\/code><\/pre>\n\n\n\n
Animation planning<\/h2>\n\n\n\n
Before you create really detailed animations, it\u2019s good to take a step back before creating something totally crazy (especially if it will be in the public on the web). There\u2019s nothing wrong with adding some fun flair, but it\u2019s tempting to over animate. The movement you create should convey meaning and enhance the user experience, not distract from it. With that said, it\u2019s time to get creating!<\/p>\n\n\n\n
I do want to call out that there are animated gifs in this tutorial to show the animations. The gifs are on repeat, which wouldn\u2019t typically be done for the designs. The purpose of having them on repeat is for demonstration purposes only.<\/p>\n\n\n\n
Moving an image with the CSS transform property<\/h2>\n\n\n\n
Before we get into complicated transforms and transitions, let\u2019s talk about coordinates on an axis grid. (Heads up: This may bring back memories of graph paper from math coursework.) Coordinates are used to move the image.<\/p>\n\n\n\n
X and Y coordinates<\/h3>\n\n\n\n
Things will look slightly differently than what you may expect. The -y value is above the x axis. HTML and CSS use what\u2019s called an \u201cinverted Cartesian coordinate system,\u201d because web pages start from top-left and read downwards.<\/p>\n\n\n\n
\"css3-transitions-transforms-coordinate-basics\"<\/figure>\n\n\n\n
Animation one: Basic transform with horizontal movement<\/h3>\n\n\n\n
We briefly touched base on translate() and how it can move an element. When put into practice, it can really float your boat, literally. As we learned above, The translate() method moves an element from its current position (according to the parameters given for the x-axis and the y-axis).<\/p>\n\n\n\n
The first project will be moving a submarine graphic. Submarines need to come up for air once in awhile, so we\u2019ll carefully style it with translate()<\/code>.<\/p>\n\n\n\n
To move it from its initial position using transform: translate(x,y)<\/code>, two new values will have to be specified. To make the submarine move right and up, the x value should be positive and the y value should be negative. If the y value is set to 0, it would move only to the right and not up.<\/p>\n\n\n\n
Submarine going up for air with transform()<\/strong><\/p>\n\n\n\n
In this example we are going to move the object 200px to the right and 25px up. The syntax is transform: translate(200px,-25px);<\/code> and the object will move on the hover of .underwater<\/code>. By creating the styles for the movement in .underwater:hover .move-right<\/code>, the action will happen on hover.<\/p>\n\n\n\n
Here is the starting HTML:<\/p>\n\n\n\n
&amp;amp;lt;div class=&quot;underwater&quot;&amp;amp;gt;\n  &amp;amp;lt;div class=&quot;object submarine move-right&quot;&amp;amp;gt;\n  \t&amp;amp;lt;!-- image is set as a background image on submarine --&amp;amp;gt;\n  &amp;amp;lt;\/div&amp;amp;gt;\n&amp;amp;lt;\/div&amp;amp;gt;<\/code><\/pre>\n\n\n\n
\"css3-transitions-transforms-basic-right-move\"<\/figure>\n\n\n\n
See this on Codepen<\/a>.<\/p>\n\n\n\n
It really does not take a lot of CSS to make this basic animation:<\/p>\n\n\n\n
.underwater {\n  position: relative;\n  min-height: 600px;\n  background-color: #4fc3da;\n}\n\n.underwater:hover .move-right{\n    transform: translate( 200px ,-25px );\n    -webkit-transform: translate( 200px ,-25px ); \/** Chrome &amp;amp;amp; Safari **\/\n    -ms-transform: translate( 200px ,-25px ); \/** Firefox **\/\n}\n\n.submarine {\n  height: 200px;\n  background: url(&quot;little-submarine.svg&quot;) no-repeat;\n}\n\n.object {\n  transition: all 2s ease-in-out;\n    -webkit-transition: all 2s ease-in-out; \/** Chrome &amp;amp;amp; Safari **\/\n    -ms-transition: all 2s ease-in-out; \/** Opera **\/\n}<\/code><\/pre>\n\n\n\n
As you can see, our coordinates would fall in the top right square. On hover, the submarine moves up to the new coordinates because of the transform.<\/p>\n\n\n\n
\"css3-transitions-transforms-coordinate-detail\"<\/figure>\n\n\n\n
Things look smooth because of the transition. The transition-duration<\/code> was set to 2sec<\/code>, which isn\u2019t too fast for this animation. The transition-timing-function<\/code> was set to ease-in-out<\/code> which gives it a slower start and end. If the duration time was increased to something larger, this would be very apparent.<\/p>\n\n\n\n
Basic animation two: Horizontal movement with keyframes and animation<\/h3>\n\n\n\n
Transform is being used a little differently in this example. Keyframes and the animation property will be utilized to create the next animation.<\/p>\n\n\n\n
Keyframe Basics<\/strong><\/h4>\n\n\n\n
Inside @keyframes<\/code> is where you define the styles and stages for the animation. Here\u2019s the example we will be using, which will help give a \u201cfade in while moving downward\u201d effect:<\/p>\n\n\n\n
@keyframes fadeInDown {\n  0% {\n    opacity: .8;\n    transform: translate(0, 0);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(0, 30px);\n  }\n}<\/code><\/pre>\n\n\n\n
The transform values are incorporated into the keyframes. The original placement is set at 0%, and at 100%, the position will move down by 30px.<\/p>\n\n\n\n
Animation basics<\/strong><\/h4>\n\n\n\n
To use CSS3 animation, you specify keyframes for the animation.<\/p>\n\n\n\n
Like designed above, @keyframes<\/code> hold what styles the element will have at certain times.<\/p>\n\n\n\n
Whenever you do this, make sure to give the animation a descriptive name. In this case, we\u2019re using fadeOut<\/code>. Any class that includes the fadeOut<\/code> will be applied. In the stages of the animation, the \u201cfrom\u201d is set to 0% and \u201cto\u201d is set to 100%. This example is pretty simple with just the two stages, but there can certainly be more steps added in between.<\/p>\n\n\n\n
Specific actions with animation subproperties<\/strong><\/h4>\n\n\n\n
The animation property is used to call @keyframes<\/code> inside a CSS selector. Animations can and will often have more than one subproperty.<\/p>\n\n\n\n
Keyframes define what the animation will look like; subproperties define specific rules for the animation. Timing, duration, and other key details of how the animation sequence should progress are all including in subproperties.<\/p>\n\n\n\n
Here are a few examples of animation subproperties:<\/p>\n\n\n\n