GETTING DOWN with
are lateral changes between a beginning and end state of a property
change between numerous states (or steps) for greater complexity
CSS3 Transitions are a presentational effect which allow property changes in CSS values to occur smoothly over a specified duration
* Totally subjective opinion
CSS Transitions can be built using the following properties:
Specifies the name or names of the CSS properties to which transitions should be applied.
Transition properties can also be applied to :before and :after psuedo-classes.
transition-property: width; transition-property: margin; transition-property: all;
Defines how long to wait between the time a property is changed and the transition actually begins.
transition-delay: 1s; transition-delay: 1.25s; transition-delay: 1200ms;
Specifies the duration in seconds or milliseconds over which transitions should occur.
transition-duration: 1s; transition-duration: 120ms; transition-duration: 3.25s;
Specifies a function to define how intermediate values for properties are computed. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration.
transition-timing-function: ease; /* Default Value */ transition-timing-function: ease-in-out; transition-timing-function: linear;
The steps() function allows you to specify intervals for the timing function. It takes one or two parameters, separated by a comma: a positive integer and an optional value of either start or end. If no second parameter is included, it will default to end.
transition-timing-function: steps(4); transition-timing-function: steps(4, start);
.box, .box2 { background: goldenrod; &:hover { background: lightblue; } .box { transition-timing-function: steps(4, start); } .box2 { transition-timing-function: steps(4, end); }
.cartoon { background: url(http://tangledindesign.com/codepen/sprite.jpg); transition: 2s steps(16); } #go:target .cartoon { background-position: -4000px 0; }
The cubic-bezier() function allows you to create custom pacing for the transition by specifying the four (4) required values.
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
Create and visualize a bezier curve here:
The transition property is a shorthand property used to represent up to four transition-related longhand properties.
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
transition: opacity 1s ease, height 1s linear .5s;
Multiple properties in one shorthand style.
Transitions can go further
Many properties are shared between CSS and SVG
Properties that can be styled with CSS can also be transitioned
This helps keep all styles together and out of the content of the page
Basic SVG animations can be achieved without JavaScript
Common Shared Properties:
fill
cx / cy / r
stroke
stroke-width
stroke-dasharray
stroke-dashoffset
JavaScript (jQuery) can be used to detect when a CSS transition completes allowing the inclusion of various callbacks to occur in sync.
CSS
.container { background: red; color: white; height: 25px; transition: all 1.5s ease; &.active { height: 55px; background: black; } }
JavaScript
var theButton = $('button'),
theBox = $('.container');
theButton.click(function() {
theBox.toggleClass('active');
theBox.one('transitionend', function() {
theBox.append('<span>Transition complete</span>');
});
});
Like CSS3 Transitions, Animations allow the change of style properties but with the use of keyframes allowing greater complexity.
Nowadays, more and more websites are using animations, whether that be in the form of GIFs, SVGs, WebGL, background videos and so on. When used properly, animation on the web brings life and interactivity, adding an extra layer of feedback and experience for users.
Most CSS properties can be animated including an element's dimensions, colors, box model, and position. But other properties such as clip-path, flex properties, and filters can also be animated. A full list of available properties can be found here:
Animations are comprised of two parts:
The main component of CSS animations is @keyframes, the CSS rule where animation is created. Think of @keyframes as being stages along a timeline. Inside @keyframes, you can define these stages, each having a different style declaration.
The @keyframes are comprised of three parts
@keyframes bounceIn { 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }
Keyframes can be built with different values
@keyframes bounceIn { 0% { transform: scale(0.1); opacity: 0; } 25%, 90% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }
@keyframes toggleOpacity { 50% { opacity: 1; } /* Turn off */ 50.001% { opacity: 0.4; } /* Keep off state for a short period */ 52.999% { opacity: 0.4; } /* Turn back on */ 53% { opacity: 1; } }
@keyframes toggle { to { opacity: 1; } }
@keyframes toggle { from { opacity: 0; } to { opacity: 1; } }
Calling @Keyframes with the animation property
The animation property is used to call @keyframes inside a CSS selector. Animation can have multiple properties:
References the name that was used when creating the @keyframes styles.
@keyframes bounceIn { ... }
animation-name: bounceIn;
The total duration of the animation from start to the end.
animation-duration: 1s; animation-duration: 150ms; animation-duration: 2.25s;
The delay before our animation will start.
animation-delay: 1s; animation-delay: 150ms; animation-delay: 2.25s;
The animation-timing-function property works in the same way as transition-timing-function by letting you establish an acceleration curve so that the speed of the animation can vary over its duration.
animation-timing-function: ease; /* Default Value */ animation-timing-function: ease-in-out; animation-timing-function: linear;
Reference the transition-timing-function slides for further details on steps() and cubic-bezier functions.
Define the amount of times an animation should play.
animation-iteration-count: infinite; animation-iteration-count: 3;
Note:
Any animation-delay value will be applied at the beginning of the first iteration only when paired with animation-iteration-count.
.heart { ... @include animation(heartBeat 1s #{$delay}); @include animation-iteration-count(#{$iteration-count}); }
Specifies whether the animation should play from start to end, end to start, or alternate between both.
animation-direction:
normal|reverse|alternate|alternate-reverse
Specifies which styles will be applied to the element at the end of the animation(s).
animation-fill-mode:
normal|forwards|backwards|both
After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended
Similar to forwards only the styles from the first keyframe will be applied.
The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions
Forwards:
Backwards:
Both:
Specifies whether the animation is playing or is paused.
animation-play-state: paused|running;
Shorthand to the rescue.
A shorthand CSS property that covers the other individual animation properties.
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
@include keyframes(rotate) { from { transform: rotate(0deg) translate(350px) rotate(0deg); } to { transform: rotate(360deg) translate(350px) rotate(-360deg); } }
.moon { @include animation(rotate 10s 5s linear infinite); } .sun { @include animation(rotate 10s linear infinite); }
In JavaScript, the following event listeners can be added to an element to run functions at their time of execution:
animationstart / webkitAnimationStart
animationiteration / webkitAnimationIteration
animationend / webkitAnimationEnd
How to ensure your animations render consistently, cleanly, and efficiently.
CSS Transitions and Animations do have some limits, best practices, and challenges.
While animations render consistently and smoothly across modern browsers, Firefox does have the tendency of showing jagged edges on animated elements.
Luckily, there's a workaround the clean up those edges.
outline: 1px solid transparent;
Apply the outline style to the animated elements to clean up their edges in Firefox.
Transitioning Z-Index values can cause inconsistent behavior.
For better performance, transition:
For more information:
The most efficient properties to transition are:
Other properties require additional re-paints and stress to the browser.
The basic rule is that you can only transition between absolute values. For example, you can’t transition between a height of 0px to auto. The browser can’t calculate the intermediate transition values, so the property change is instant.
This also includes background gradients. Transitioning between solid colors is fine but gradients are not supported.
CSS transitions, keyframes, and animations can still require the use of vendor prefixes. Leverage Sass mixin libraries such as Bourbon to streamline this process.
Because who remembers everything?
http://cubic-bezier.com - Create cubic-bezier transitions
Bourbon.io - Sass Mixin Library
Animate.css - CSS Animation Library
Intro to CSS Animations - CSS-Tricks Video