mJordan Brady PRO
I’m mJordan, a creative front end developer. I love learning and sharing what I know with my local Tech Community.
@mJordanCodes
I'm Jordan Brady, a creative front end
developer, mentor, and community leader.
@mJordanCodes
mjordan.codes
@mJordanCodes
Please, interrupt me!
@mJordanCodes
CSS Animations make it possible to animate transitions from one CSS style configuration to another.
@mJordanCodes
@mJordanCodes
@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
@mJordanCodes
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
@mJordanCodes
Now that we have the why and the when....
@mJordanCodes
Style Calculations
Layout
Composite
Paint
@mJordanCodes
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
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
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
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.
@mJordanCodes
@mJordanCodes
@mJordanCodes
Position transform: translate(npx, npx);
Scale transform: scale(n);
Rotation transform: rotate(ndeg);
Opacity opacity: 0...1;
@mJordanCodes
For real... HOW?! Show me the code!
@mJordanCodes
.simple-transition {
transition: 1000ms;
}
.simple-transition:hover {
border-radius: 100%;
}
@mJordanCodes
@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
@mJordanCodes
@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% }
}
@mJordanCodes
@mJordanCodes
By mJordan Brady
I’m mJordan, a creative front end developer. I love learning and sharing what I know with my local Tech Community.