mJordan Brady
I’m mJordan, a creative front end developer. I love learning and sharing what I know with my local Tech Community.
a crash course in getting started with
CSS Animation
@mJordanCodes
Hello World!
I'm Jordan Brady, a creative front end
- Front End Software Engineer at Brandwise
developer, mentor, and community leader.
- Network Director for WWCode Boulder/Denver
@mJordanCodes
- My two dogs: Cub and Pebbles
- Everything CSS
- Rubber Ducks
@mJordanCodes
Find me online
mjordan.codes
@mJordanCodes
Before I get started....
Please, interrupt me!
- Ask questions
- Share ideas and examples
- Demand more information
- Start a conversation
@mJordanCodes
What?
CSS Animations
CSS Animations make it possible to animate transitions from one CSS style configuration to another.
@mJordanCodes
@mJordanCodes
Why?
@mJordanCodes
Motion guides user attention in a smooth, unbroken fashion. When a UI changes appearance, motion provides continuity between the placement and appearance of elements before and after a transition...
@mJordanCodes
- Relationships / Hierarchy
- Cause and Effect
- Feedback
- Guide Users
Benefits of Motion
@mJordanCodes
When?
Now that we have the why....
@mJordanCodes
Your portfolio is one of the only sites that you will build that is a complete creative expression of yourself with no constraints...
@mJordanCodes
A few things to keep in mind...
- Less is more
- Animations should have a clear purpose
- Inform / communicate
- Draw attention
- Appear modern, up-to-date, and polished
- Delight
@mJordanCodes
How?
Now that we have the why and the when....
@mJordanCodes
How browsers render style
Style Calculations
Layout
Composite
Paint
@mJordanCodes
How browsers render style
1. Style Calculations
Once rules are known, they are applied and the final styles for each element are calculated.
This is the process of figuring out which CSS rules apply to which elements based on matching selectors
@mJordanCodes
How browsers render style
2. Layout
Because the web's layout model means that one element can affect others, this process can be quite involved
The browser can now calculate how much space it takes up and where it needs to be on the screen.
@mJordanCodes
How browsers render style
3. Paint
It involves drawing out text, colors, images, borders, and shadows, essentially every visual part of the elements.
Painting is the process of filling in pixels
Typically done onto multiple surfaces, often called layers.
@mJordanCodes
How browsers render style
4. Composite
Since the parts of the page were drawn into potentially multiple layers they need to be drawn to the screen in the correct order so that the page renders correctly.
This is especially important for elements that overlap another, since a mistake could result in one element appearing over the top of another incorrectly.
Worst things to Animate
@mJordanCodes
Layout Properties
Also Avoid
@mJordanCodes
Painting Properties
What can be Animated Cheaply?
@mJordanCodes
-
Position transform: translate(npx, npx);
-
Scale transform: scale(n);
-
Rotation transform: rotate(ndeg);
-
Opacity opacity: 0...1;
@mJordanCodes
How?
For real... HOW?! Show me the code!
@mJordanCodes
.simple-transition {
transition: 1000ms;
}
.simple-transition:hover {
border-radius: 100%;
}@keyframes
- a way to define "steps" your animation should take
@mJordanCodes
- the most basic example uses a from and a to
@mJordanCodes
.simple-keyframes:hover {
animation-name: simple-keyframe-animation;
animation-duration: 5s;
}
@keyframes simple-keyframe-animation {
from { border-radius: 0 0 0 0; }
to { border-radius: 100% 100% 100% 100%; }
}@mJordanCodes
.simple-keyframes:hover {
animation-name: simple-keyframe-animation;
animation-duration: 5s;
}
@keyframes simple-keyframe-animation {
from { border-radius: 0 0 0 0; }
to { border-radius: 100% 100% 100% 100%; }
}animation-name --> matches the named @keyframes set
animation-duration --> how long the animation should take to complete
@keyframes
- a way to define "steps" your animation should take
- the most basic example uses a from and a to
@mJordanCodes
- Can also use percents when you want more control / more steps
- Can update multiple CSS properties in each step
@mJordanCodes
.percent-keyframes:hover {
animation-name: percent-keyframe-animation;
animation-duration: 5s;
}
@keyframes percent-keyframe-animation {
0% { border-radius: 0 0 0 0 }
25% { border-radius: 0 100% 0 0 }
50% { border-radius: 0 100% 100% 0 }
75% { border-radius: 0 100% 100% 100% }
100% { border-radius: 100% 100% 100% 100% }
}animation properties
@mJordanCodes
- animation-name --> matches the named @keyframes set
- animation-duration --> how long the animation should take to complete
- animation-delay --> time between the element being loaded and the start of the animation
- animation-direction --> defines if the animation should play forward, in reverse, or in alternating cycles
- animation-iteration-count --> number of times the animation should be run
- animation-play-state --> pause or play the animation
- animation-timing-functions --> establishes preset acceleration curves (like ease or linear)
- animation-fill-mode --> sets values to be applied before/after the animation
animation resources
@mJordanCodes
-
CSS Animation Rocks
Weekly newsletter with articles, tips, and tutorials. Course: Level Up your CSS Animation -
CSS Animation for Beginners
Handy article with great visuals and code examples. -
Animate.css
CSS Animation library that makes it super simple to add fun animations to your site quickly.
a crash course in getting started with CSS Animation
By mJordan Brady
