In this post we\u2019re going to walk through the basics of CSS<\/abbr> animation. You can follow along and view the CSS code<\/a> for the example animations in this post.<\/p>\n\n\n\n CSS animations are made up of two basic building blocks.<\/p>\n\n\n\n Let\u2019s look at each individually.<\/p>\n\n\n\n Keyframes are the foundation of CSS<\/abbr> animations. They define what the animation looks like at each stage of the animation timeline. Each Let\u2019s take a look at a simple The (If you\u2019re unfamiliar with CSS Transforms, you\u2019ll want to brush up on your knowledge.<\/a> Combining CSS transforms in the animations is really where the magic happens.)<\/p>\n\n\n\n Once the Animation properties do two things:<\/p>\n\n\n\n The animation properties are added to the CSS selectors (or elements) that you want to animate. You must add the following two animation properties for the animation to take effect:<\/p>\n\n\n\n Continuing with the above Shorthand syntax:<\/p>\n\n\n\n By adding both the @keyframes and the animation properties, we have a simple animation!<\/p>\n\n\n\n Each animation property can be defined individually, but for cleaner and faster code, it\u2019s recommended that you use the animation shorthand. All the animation properties are added to the same Just remember for the animation to function correctly, you need to follow the proper shorthand order AND specify at least the first two values.<\/p>\n\n\n\n As of late 2014, many Webkit based browsers still use<\/a> the -webkit-prefixed version of both animations, keyframes, and transitions. Until they adopt the standard version, you\u2019ll want to include both unprefixed and Webkit versions in your code. (For simplicity, I\u2019ll only be using the unprefixed versions in my examples.)<\/p>\n\n\n\n Keyframes and animations with WebKit prefixes:<\/p>\n\n\n\n To make your life easier, consider using Bourbon<\/a>, a Sass mixin library which contains up-to-date vendor prefixes for all modern browsers. Here\u2019s how simple it is to generate vendor-prefixed animations and keyframes using Bourbon:<\/p>\n\n\n\n In addition to the required animation-name<\/strong> and animation-duration<\/strong> properties, you can further customize and create complex animations using the following properties:<\/p>\n\n\n\n Let\u2019s look at each of them individually.<\/p>\n\n\n\n The The default value, if no other value is assigned, is CSS syntax:<\/p>\n\n\n\n Animation shorthand syntax (recommended):<\/p>\n\n\n\n The The value is defined in seconds (s) or milliseconds (mil).<\/p>\n\n\n\n CSS syntax:<\/p>\n\n\n\n Animation shorthand syntax (recommended):<\/p>\n\n\n\n The CSS syntax:<\/p>\n\n\n\n Animation shorthand syntax (recommended):<\/p>\n\n\n\n The The possible values are:<\/p>\n\n\n\n CSS syntax:<\/p>\n\n\n\n Animation shorthand syntax (recommended):<\/p>\n\n\n\n The By default, the animation will not effect the styles of the element before the animation begins (if there is an animation-delay) or after the animation is finished. The CSS syntax:<\/p>\n\n\n\n Animation shorthand syntax (recommended):<\/p>\n\n\n\n The The possible values are:<\/p>\n\n\n\n Example :<\/p>\n\n\n\n To add multiple animations to a selector, you simply separate the values with a comma. Here\u2019s an example:<\/p>\n\n\n\n That\u2019s it! With those basic properties, the possible animations you can create are endless. The best way learn is to jump in and start animating.<\/p>\n\n\n\n Here are a couple of resources to get you started:<\/p>\n\n\n\n Upcase for Designers<\/a><\/strong> \u2013 an online learning community with courses on front-end design and development techniques.<\/p>\n\n\n\nThe Building Blocks of Animations<\/h2>\n\n\n\n
Building Block #1: Keyframes<\/h2>\n\n\n\n
@keyframes<\/code> is composed of:<\/p>\n\n\n\nbounceIn<\/code>.<\/li>0%<\/code> represents the beginning state of the animation. 100%<\/code> represents the ending state of the animation. Multiple intermediate states can be added in between.<\/li>@keyframes<\/code> I\u2019ve named \u201cbounceIn\u201d. This @keyframes<\/code> has three stages. At the first stage (0%)<\/code>, the element is at opacity 0 and scaled down to 10 percent of its default size, using CSS transform scale. At the second stage (60%)<\/code> the element fades in to full opacity and grows to 120 percent of its default size. At the final stage (100%)<\/code>, it scales down slightly and returns to its default size.<\/p>\n\n\n\n@keyframes<\/code> are added to your main CSS file.<\/p>\n\n\n\n@keyframes bounceIn {\n 0% {\n transform: scale(0.1);\n opacity: 0;\n }\n 60% {\n transform: scale(1.2);\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n }\n}\n<\/code><\/pre>\n\n\n\nBuilding Block #2: Animation Properties<\/h2>\n\n\n\n
@keyframes<\/code> are defined, the animation properties must be added in order for your animation to function.<\/p>\n\n\n\n@keyframes<\/code> to the elements that you want to animate.<\/li>animation-name<\/code>: The name of the animation, defined in the @keyframes<\/code>.<\/li>animation-duration<\/code>: The duration of the animation, in seconds (e.g., 5s) or milliseconds (e.g., 200ms).<\/li><\/ul>\n\n\n\nbounceIn<\/code> example, we\u2019ll add animation-name<\/code> and animation-duration<\/code> to the div that we want to animate.<\/p>\n\n\n\ndiv {\n animation-duration: 2s;\n animation-name: bounceIn;\n}<\/code><\/pre>\n\n\n\ndiv {\n animation: bounceIn 2s;\n}<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/animation-bounceIn.gif\")
<\/figure>\n\n\n\nAnimation Property Shorthand<\/h2>\n\n\n\n
animation:<\/code> property in the following order:<\/p>\n\n\n\nanimation: [animation-name] [animation-duration] [animation-timing-function]\n[animation-delay] [animation-iteration-count] [animation-direction]\n[animation-fill-mode] [animation-play-state];<\/code><\/pre>\n\n\n\nNote About Prefixes<\/h2>\n\n\n\n
div {\n -webkit-animation-duration: 2s;\n animation-duration: 2s;\n -webkit-animation-name: bounceIn;\n animation-name: bounceIn;\n}<\/code><\/pre>\n\n\n\n@-webkit-keyframes bounceIn { \/* styles *\/ }\n@keyframes bounceIn { \/* styles *\/ }<\/code><\/pre>\n\n\n\ndiv {\n @include animation(bounceIn 2s);\n}<\/code><\/pre>\n\n\n\n@include keyframes(bouncein) { \/* styles *\/}<\/code><\/pre>\n\n\n\nAdditional Animation Properties<\/h2>\n\n\n\n
animation-timing-function<\/code><\/li>animation-delay<\/code><\/li>animation-iteration-count<\/code><\/li>animation-direction<\/code><\/li>animation-fill-mode<\/code><\/li>animation-play-state<\/code><\/li><\/ul>\n\n\n\nAnimation-timing-function<\/h2>\n\n\n\n
animation-timing-function:<\/code> defines the speed curve or pace of the animation. You can specify the timing with the following predefined timing options: ease<\/code>, linear<\/code>, ease-in<\/code>, ease-out<\/code>, ease-in-out<\/code>, initial<\/code>, inherit<\/code>. (Or for more advanced timing options, you can creating custom timing functions using cubic-bezier curve<\/a>.)<\/p>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/animation-timing.gif\")
<\/figure>\n\n\n\nease<\/code>, which starts out slow, speeds up, then slows down. You can read a description of each timing function here<\/a>.<\/p>\n\n\n\nanimation-timing-function: ease-in-out;<\/code><\/pre>\n\n\n\nanimation: [animation-name] [animation-duration] [animation-timing-function];\nanimation: bounceIn 2s ease-in-out;<\/code><\/pre>\n\n\n\nAnimation-Delay<\/h2>\n\n\n\n
animation-delay:<\/code> allows you to specify when the animation (or pieces of the animation) will start. A positive value (such as 2s) will start the animation 2 seconds after it is triggered. The element will remain unanimated until that time. A negative value (such as -2s) will start the animation at once, but starts 2 seconds into the animation.<\/p>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/animation-delay.gif\")
<\/figure>\n\n\n\nanimation-delay: 5s;<\/code><\/pre>\n\n\n\nanimation: [animation-name] [animation-duration] [animation-timing-function]\n[animation-delay];\nanimation: bounceIn 2s ease-in-out 3s;<\/code><\/pre>\n\n\n\nAnimation-iteration-count<\/h2>\n\n\n\n
animation-iteration-count:<\/code> specifies the number of times that the animation will play. The possible values are:<\/p>\n\n\n\n#<\/code>– a specific number of iterations (default is 1<\/code>)<\/p>\n\n\n\ninfinite<\/code> – the animation repeats forever<\/p>\n\n\n\ninitial<\/code> – sets the iteration count to the default value<\/p>\n\n\n\ninherit<\/code> – inherits the value from the parent<\/p>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/animation-iteration.gif\")
<\/figure>\n\n\n\nanimation-iteration-count: 2;<\/code><\/pre>\n\n\n\nanimation: [animation-name] [animation-duration] [animation-timing-function]\n[animation-delay] [animation-iteration-count];\nanimation: bounceIn 2s ease-in-out 3s 2;<\/code><\/pre>\n\n\n\nAnimation-direction<\/h2>\n\n\n\n
animation-direction:<\/code> property specifies whether the animation should play forward, reverse, or in alternate cycles.<\/p>\n\n\n\nnormal<\/code> (default) – The animation plays forward. On each cycle the animation resets to the beginning state (0%) and plays forward again (to 100%).<\/p>\n\n\n\nreverse<\/code> – The animation plays backwards. On each cycle the animation resets to the end state (100%) and plays backwards (to 0%).<\/p>\n\n\n\nalternate<\/code> – The animation reverses direction every cycle. On each odd cycle, the animation plays forward (0% to 100%). On each even cycle, the animation plays backwards (100% to 0%).<\/p>\n\n\n\nalternate-reverse<\/code> – The animation reverses direction every cycle. On each odd cycle, the animation plays in reverse (100% to 0%). On each even cycle, the animation plays forward (0% or 100%).<\/p>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/animation-direction.gif\")
<\/figure>\n\n\n\nanimation-direction: alternate;<\/code><\/pre>\n\n\n\nanimation: [animation-name] [animation-duration] [animation-timing-function]\n[animation-delay] [animation-iteration-count] [animation-direction];\nanimation: bounceIn 2s ease-in-out 3s 3 alternate;<\/code><\/pre>\n\n\n\nAnimation-fill-mode<\/h2>\n\n\n\n
animation-fill-mode:<\/code> specifies if the animation styles are visible before or after the animation plays. This property is a little confusing, but once understood it is very useful.<\/p>\n\n\n\nanimation-fill-mode<\/code> property can override this behavior with the following possible values:<\/p>\n\n\n\nbackwards<\/code> – Before the animation (during the animation delay), the styles of the initial keyframe (0%) are applied to the element.<\/p>\n\n\n\nforwards<\/code> – After the animation is finished, the styles defined in the final keyframe (100%) are retained by the element.<\/p>\n\n\n\nboth<\/code> – The animation will follow the rules for both forwards and backwards, extending the animation properties before and after the animation.<\/p>\n\n\n\nnormal<\/code> (default) – The animation does not apply any styles to the element, before or after the animation.<\/p>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/animation-fill.gif\")
<\/figure>\n\n\n\nanimation-fill-mode: forwards;<\/code><\/pre>\n\n\n\nanimation: [animation-name] [animation-duration] [animation-timing-function]\n[animation-delay] [animation-iteration-count] [animation-direction]\n[animation-fill-mode];\nanimation: bounceIn 2s ease-in-out 3s 3 forwards;<\/code><\/pre>\n\n\n\nAnimation-play-state<\/h2>\n\n\n\n
animation-play-state:<\/code> specifies whether the animation is playing or paused. Resuming a paused animation starts the animation where it was left off.<\/p>\n\n\n\nplaying<\/code> – The animation is currently running<\/p>\n\n\n\npaused<\/code> – The animation is currently paused<\/p>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/animation-play.gif\")
<\/figure>\n\n\n\n.div:hover {\n animation-play-state: paused;\n}<\/code><\/pre>\n\n\n\nMultiple Animations<\/h2>\n\n\n\n
.div {\n animation: slideIn 2s, rotate 1.75s;\n}<\/code><\/pre>\n\n\n\nGo Forth and Animate<\/h2>\n\n\n\n