If you want an element on your page to change over a specified period of time, you can animate it using CSS. CSS animatable properties are properties that can be gradually changed from one value to another, such as size, number, color, or percentage.
CSS animations provide more control and a wider variety of options compared to transitions.
We’ve put together a list of the best CSS animatable properties and how they work. Let’s take a closer look.
CSS Animatable Properties List
Background
The “background” property is a shorthand way to set the background for a webpage. This property can include up to eight different values, which include: the background image, the background position, the background size, the background repeat, the background origin, the background clip, the background attachment, and the background color.
Background-Color
This CSS property allows you to change the background color of an element. This includes the space occupied by the element, such as the padding and border, but does not include the margin.
Color values can be specified in different ways:
- Hexadecimal in the format of #rrggbb
- RGB in the format of rgb (red, green, blue)
- RGBA in the format of rgba (red, green, blue, alpha)
- HSL in the format of hsl (hue, saturation, lightness)
- HSLA in the format of hsla (hue, saturation, lightness, alpha)
- Predefined. The CSS and HTML specification includes 140 predefined color names you can use.
- The currentcolor keyword can be used to represent the value of a color property. When used, elements that don’t have a property value can inherit the color by default.
Background-Position
The position of a background image can be controlled by setting values for left, right, top, and bottom. These values include left top, left center, left bottom, right top, right center, right bottom, center top, center center, and center bottom.
Background-Size
The size of the background image can be set using the values ‘auto’, ‘length’, ‘percentage’, ‘cover’, or ‘contain’.
Border
The border property allows you to set the width, style, and color of an element’s border in a single declaration. If the border property is not specified, the text color is applied.
Border-Bottom
The bottom border is styled using this property. It is a shorthand for: border-bottom-width, border-bottom-style, and border-bottom-color.
Border-Bottom-Color
This will change the color of the bottom border for an element. It’s important to note that you need to have a border already established before you can change the color. Therefore, always define the border-style or border-bottom-style first, before changing the border-bottom-color.
Border-Bottom-Left-Radius
Round borders can be added to the corners of an element by defining the radius of the bottom left corner. Length and percentage values can be used.
Border-Bottom-Right-Radius
This defines the radius of the bottom right corner.
Border-Bottom-Width
The width of the bottom border can be set using the border-bottom-width property. This should be done after the border is created, using the border-style or border-bottom-style properties. Possible values for width include ‘medium’, ‘thin’, ‘thick’, and a length.
Border-Color
This defines the border color, which can be up to four different colors defined by border-color: color1 color2 color3 color4.
If an element has four values for the border-color property, each side of the element’s border will be a different color.
If an element has three values for its border color, the top and bottom borders will be the first and last specified color, while the right and left borders will be the middle color.
If a border has two colors, the top and bottom borders will be the first color, while the right and left borders will be the second color.
If it has only one value, the color specified will be applied to all borders.
Border-Left
This styles the left border, which is a shorthand property for the width, style, and color.
Border-Left-Color
This determines the color of the left border. You can use colors and transparency.
Border-Left-Width
The width for the left border can be set to medium, thin, or thick. You can also set a specific length.
Border-Right
This styles the right border and is a shorthand property for border-right-width, border-right-style, and border-right-color.
Border-Right-Color
This sets the border for the right color.
Border-Right-Width
This sets the width for the right border.
Border-Spacing
This defines the distance between the borders of cells in a table.
Border-Top
This formats the top border. It’s a concise property for: border-top-width, border-top-style, and border-top-color.
Border-Top-Color
This sets the color of the top border.
Border-Top-Left-Radius
This defines the top left corner radius.
Border-Top-Right-Radius
This defines the top right corner radius.
Border-Top-Width
This sets the width of the top border.
Bottom
This CSS property is used to position an element vertically. This only affects elements that have been positioned.
When the position is:
- position: absolute; or position: fixed; the bottom edge of the element is set to a unit above or below the bottom edge of the nearest positioned ancestor.
- position: relative; the bottom edge moves above or below its normal position.
- position: sticky; the bottom property behaves like it’s in a relative or fixed position when the element is inside and outside a viewport, respectively.
- position: static; the property has no effect.
Box-Shadow
The following text adds shadows to an element. The values that can be used include none, horizontal offset, vertical offset, blur, spread, and color.
Clip
This allows you to clip an image that is larger than its containing element. Values include auto and shape.
Color
This defines the color of the text.
Column-Count
This separates an element into several columns. The number of columns is determined by the value, which can be a number or “auto”.
Column-Gap
This text explains how to change the space between columns in a document. You can either set a specific value, or use the “normal” setting.
Column-Rule
This shorthand property defines the width, style, and color of the rule between columns.
Column-Rule-Color
This sets the color of the rule between columns.
Column-Rule-Width
The width of the separating rule between columns can be set to different values, including medium, thin, thick, and length.
Column-Width
This defines the width of the column. The possible values are “auto” or a specific length.
Columns
The “column-width” and “column-count” properties are used to set the width and number of columns, respectively.
Filter
This allows you to change the way an element looks, by adding visual effects like blur or saturation. You can also set the values for features like brightness, contrast, and grayscale.
Flex
This allows you to set the size of flex items using a shorthand property. You can set the amount of space the flex items should take up using the flex-grow property. You can set the amount of space the flex items should shrink using the flex-shrink property. You can set the size of the flex items using the flex-basis property.
Flex-Basis
Negative lengths are not allowed. The starting length of a flexible item is defined by values such as numbers and auto. Negative lengths are not possible.
Flex-Grow
This refers to how much an item will grow or shrink in relation to other flexible items in the container.
Flex-Shrink
The text is discussing the “flex-shrink” CSS property, which determines how much an element will shrink in relation to other elements in a flex container.
Font
This sets the font for the text. It’s a shorter way of writing: font-style, font-variant, font-weight, font-size/line-height, and font-family.
Font-Size
The text size can be set to different values, including medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger, length, and percentage.
Font-Size-Adjust
The following text allows you to adjust the size of the font displayed by the browser if the first font choice isn’t available.
Font-Stretch
You can use this setting to change the width of the text, making it either narrower or wider. The three values you can choose from are normal, expanded, and condensed.
Font-Weight
The font-weight attribute allows you to set the thinness or thickness of the font. You can use the values normal, bold, bolder, lighter, and number.
The Principles of traditional CSS animation
Squash and Stretch
We can apply this squash and stretch effect through a CSS3 property, transform:
We are also using more complex timing for this animation. You can use from and to for basic animations. But you can also specify many actions for your animation using percentages.
Anticipation
Thetext says that anticipating something adds suspense or a sense of power. Adding a shadow beforehand suggests that something is falling from above.
We have added an additional division for the shadow so that we can animate it separately from the ball.
We allow the ball to remain in its original position for a few seconds before it drops into the scene. By doing this, we create a sense of anticipation for the viewer.
Staging
vivid colors and images When you think about Disney films, you probably think about the magical, colorful, and happy world that they take place in. This is partially due to the fact that Disney films have some of the best background art out there.
The artists who create the backgrounds for these films are incredibly talented and help to create the wonderful and fantastical world that the films are set in.
The stage is important for focusing attention. Lighting will be cast on the most important area, like on a theater stage. The stage should add to the illusion.
Straight-Ahead vs Pose to Pose
The option to create keyframes throughout the sequence and then fill in the gaps later is known as “in-betweening,” or “tweening.”
CSS animation is typically done using the pose to pose method, where keyframes of an action are added and then the browser automatically tweens the intermediate frames.
The straight-ahead animation technique can teach us a lot. Even though the browser has a lot of different effects, there are some cases where you have to put more animation into it to get the look you want.
Follow-Through And Overlapping
This is also known as physics! This is when you show movement in the body, such as arms swaying or long hair falling.
This is an example of an object’s inertia. An object’s inertia is when its mass resists changes in its motion. This is why a person with a big stomach will turn their body first, and then their gut will follow shortly after.
Slow in and Slow Out
This is about acceleration and deceleration. Imagine a car speeding down the road that has to come to a stop. If it were to stop instantly, it wouldn’t be believable.
The roller coaster will go up and down the track, reaching its fastest speed at the bottom of the dip. It will then slow down as it goes up the other side before repeating the cycle.
In CSS, we can control this with the animation-timing-function property:
ease-inSlow at the beginning, and then speeds up.ease-outFast at the beginning, and then slows to a stop.ease-in-outStarts slow, speeds up in the middle, and then slows to a stop.linearMoves at an even speed from start to finish.
Arcs
The follow-through principle of physics states that an object will continue moving in the same direction unless an outside force acts upon it. This principle can be applied to arcs, which are a useful way of thinking about the trajectory of an object.
Arcs follow the basic principle that what goes up must come down, meaning that an object will travel in a downward motion unless an outside force changes its course.
The following animation can take a bit more time to adjust in CSS. The goal is to animate the ball to go up and down, as well as side to side, all at the same time.
A secondary action is a small detail that makes the animation more realistic. It addresses the small details.
For example, if we had someone with long hair walking, the person’s hair would bounce or ruffle in the wind.
We can add the animation to the new img element we’re using for the ball’s texture, rather than adding another div.
Timing
The timing of your animation is important for how realistic it will look.
This can be easily done by using the animation-duration property and adjusting the percentage values for the individual animation.
Exaggeration
Cartoons are known to use exaggeration to make their characters look more interesting. For example, a cartoon character can contort into any shape and still manage to spring back to normal.
This is because in animation, exaggeration is used for emphasis to bring to life an action that would otherwise look flat.
Although you should not exaggerate excessively, it can be effective to do so moderately. For example, Disney would animate characters based on reality but then push them slightly further.
So if a character ran into a wall, their body would squash into the wall more than you would expect, to emphasize the force of the impact.
We’re using a technique called exaggeration in combination with squash and stretch to make it really obvious when the ball hits the floor. I’ve also added a subtle wobble to the animation. Finally, we also stretch the ball in and out as it bounces up and down to emphasize the speed.
Solid Drawing and Appeal
Even then, there should still be a natural flow to the movement. The basic principle of CSS animation is that it should be believable, not robotic. Even if you are animating a machine, there should be a natural flow to the movement.
Each character’s appeal will be unique, but anything can have character, as Disney has always shown.
We want to make something people will enjoy. But with CSS, think about how the animation will fit into the design and make the experience more enjoyable. We don’t want to make animations that are annoying here. We want to make something people will enjoy.
Ready to Animate
The new CSS animation feature is great, but it will probably be overused and misused at first. There is a danger that we’ll see a return of those long, Flash-style animated splash pages.
CSS animation can be used to add movement and life to a website. The code for a bouncing ball may not be the most semantic, but it hopefully shows how simple it can be to animate almost anything on the page with CSS.
0 comments