Housekeeping
--
-
- Display your preferred name and pronoun. -
- We are here for you! -
- Every question is important. -
- Participate, Experiment, Have Fun! -
Intro to CSS Animation
-Stretch - "Bio" Break
-4:00 PST / 6:00 CST / 7:00 EST
-Introductions
-Morgan Jones
-Front End Developer
-TA Intro(s)
-Faraja Thompson
-Educator
-TA Intro(s)
-Anne Katzeff
-Web Designer & Front-End Developer, Artist, Teacher
-Workshop Topics
--
-
- Transitions & Transforms -
- Working in 2D & 3D -
- Accessibility guidelines for animated elements -
- Animations & Keyframes -
- Animation & the Clip-path property -
Workshop Goals
--
-
- Introduce the basics of animating elements -
- Adding animated elements to your projects -
- Understand Accessibility guidelines for animation -
- Exploring more of what you can do with CSS! -
AGENDA
--
-
- Why Animate? -
- Environment Setup -
- Transition & Transforms -
- Working in 2D & 3D -
Why Animate?
-Enhances the user experience
--
-
- Conveys Information -
- Grab The User's Attention -
Why CSS over JavaScript?
--
-
- We use it for simple movement of UI element states -
- toggle -
- buttons -
- menu items -
-
-
Less is More!
--
Too much movement on a page can be distracting.
-- - prefers-reduced-motion:Sometimes less movement is more - "(web.dev article, Thomas Steiner)" - - -
there are media queries we use:
--
prefers-reduced-motion - is a CSS feature for users with non-essential motion settings.
- - - mdn webdocs | prefers-reduced-motion - -Setting up our Environment
--
-
-
- Codepen -
- Text Editor -
-
- - Codepen.io - - -
Codepen setup
--
-
- create account on Codepen.io -
- create a new pen, select gear icon in CSS window -
- Pen Settings > CSS > Vendor Prefixing > Autoprefixer -
- for each new exercise we are going to fork their pens - -
-
- - -
Local Setup in Text Editor
--
-
- link your css file to your html file -
- When writing in CSS you can use Vendor Prefixes - - -
-
-h1 {
- -webkit-transition: all 3s ease-out;
- transition: all 3s ease-out;
-}
-
-h1{ -webkit-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
-}
-
-
- These exercises will work without vendor prefixes
- For information on vendor prefixes - Vendor Prefixes - - -Transitions
-transitions enable you to control the transition between two states of an element.
Transitions require two sub properties to work:
--
-
Transition-property
- -
Transition-duration
- Transition Property
-We name the property that we want to change.
- - -
-
-
-button {
- background-color: green;
- transition-property:background-color;
- transition-duration:300ms;
-}
-button:hover{
- background-color:orange;
-}
-
-
-
- Transitions & pseudo-classes
-a pseudo-class is added to a selector that specifies a special state of the selected element(s)
- - mdn docs | pseudo-classes - -
-
-/* Any button over which the user's pointer is hovering */
-
-button {
- background-color: green;
- transition-property:background-color;
- transition-duration:300ms;
-}
-
-button:hover{
- background-color:orange;
-}
-
-
- Transition-Duration
-We set the time of the transition in seconds(s) or milliseconds(ms)
- - - -
-
-
-button {
- background-color: green;
- transition-property:background-color;
- transition-duration:300ms;
- }
-
-button:hover{
- background-color:orange;
-}
-
-
- codepen.io | button-hover
-
- Additional Properties for Transition
--
-
-
transition-timing-function
- -
transition-delay
-
-
-button{
- transition-timing-function:ease-in-out;
- transition-delay:2s;
-}
-
-
-
-
- transition-timing-function
- A CSS Property that sets a speed curve, allowing you to change the speed during the transition
- - codepen.io | transition-timing-functions - -Additional Transition Timing Functions
-cubic-bezier
steps
-
-button{
- transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);
-}
-
-button{
- transition-timing-function: steps(6, end);
-}
-
-
-
- mdn docs | cubic bezier & steps
-
- transition-delay
- -
specifies the duration to wait before starting the transition of the property.
-
-
-button{
- transition-delay: 250ms;
- transition-property: margin-right;
-}
-
-
-
-
- setting more than one property to be changed
-
-
-button {
- width:20px;
- height:40px;
- background-color:#da7b93;
- transition: height 1s, background-color 2s;
- /* we can write the transition-property and duration for each,
- separated by a comma. */
-
-}
-
-button:hover{
- height:50px;
- background-color:#da8735;
-
-}
-
-
-
- - codepen.io | shorthand transitions - multiple properties -
- -Shorthand keyword: all
-
-
-button {
- width:20px;
- height:40px;
- background-color:#da7b93;
- transition: all 2s;
-
-}
-
-button:hover{
- width:50px;
- background-color:#da8735;
-
-}
-
-
-
-
- codepen.io | shorthand practice
-
- Transitions Do Not Work on
--
-
-
background-images
- border-style
- font-family
-
General rule: We can use transition on properties expressed by numbers (width, height, color)
Are we just changing timing and color? What if I want to change the shape?
--
transition works with a partner...
Transform
-transform is a property that moves or changes an element's appearance.
-
-
- Size -
- Position -
- Shape -
-
- - mdn docs | transform - -
How it Works
-The transform property uses function values:
-
-
scale()
- translate()
- rotate()
- skew()
-
Transforms & Accessibility
-
- transform relies on the (x,y) axis for 2D animation.
scale()
defines a transformation that resizes an element on the 2D plane
- -
-
-div {
- width:100px;
- height:100px;
- transform: scale(0);
-/*When the scale is zero, we don't see the element at all.*/
-}
-
-div {
- width:100px;
- height:100px;
- transform: scale(1);
-/* When the scale is one, the element stays in place. */
-
-}
-div{
- width:100px;
- height:100px;
- transform:scale(2);
-/* When the scale is 2 the element doubles in size. */
-/* it is now 200px wide and tall */
-}
-
-
- mdn docs | transform-function : scale()
- - - codepen.io | transform demo - -
translate
repositions an element in horizontal or vertical directions.
- values are in length or percentage - -
-
-div {
- transform: translate(42px, 35px);
-}
-
-
- mdn docs | transform-function : translate()
- - - codepen.io | transform demo - -
rotate()
rotates an element on a fixed point.
-values are set in degrees
- - Other values used are turns and radians. we will be focusing on degrees. - - -
-
-div {
- transform: rotate(90deg);
-}
-
-
- mdn docs | transform-function : rotate()
- - - codepen.io | transform demo - -
skew()
skews an element on the 2D plane.
- -
-
-div {
- transform: skew(90deg);
-}
-
-
- mdn docs | transform-function : skew()
- - - codepen.io | transform demo - -
transform-origin
-
-
transform-origin:separate from thetransformproperty.
- - specifies the origin point of the transform. -
- apply it to the parent element. -
- default for rotating is the center. -
Practice
-Put Transition & Transform together
- - - codepen.io | transition & transform together -Something to remember with transform
- -
-
- positive values move elements right and down. -
- negative values move elements left and up. - -
pseudo-classes vs. pseudo-elements
-Remember a pseudo-class we use by adding to a selector that specifies the state of the element.
-pseudo-classes vs. pseudo-elements
-pseudo-elements let you style a part of a selected element. -
-
-a::before{
- content:'';
- position:absolute;
- left:0;
- top:0;
- background-color:#fe6437;
- height:100%;
- width:100%;
- z-index:-1;
- transform-origin:top left;
- transform:rotate(-90deg);
- transition:transform 1s;
- }
-
-
-
-
- mdn docs | pseudo-elements
-
- Common pseudo-elements
--
-
- ::before -
- ::after - -
- -
Using :: helps us differentiate between elements & classes.
-Z-index
- property used to set the order of a positioned element.
-elements with a larger z-index overlap and cover those with a smaller one.
-Let's Develop It!
-let's add the pseudo-elements a button.
- codepen.io | project button code-along -perspective & the Z axis
-working in 3D -
the Z axis
--
-
- the Z axis is perpendicular to the x & y axis. -
the Z axis
--
-
- uses the
perspective:property which is the distance between the viewer and the screen.
-
-
-body{
- perspective:500px;
-}
-
-div{
- height:150px;
- width:150px;
- background-color:#e58064;
- position:absolute;
- top:50%;
- left:50%;
- transition:transform 2s;
-}
-div:hover{
- transform: translateZ(300px);
-}
-
-
-
-
- translateZ() is to be less than the perspective.
Practice
-- translateZ() & perspective -
- 
- 
- 
- 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+