WEBD 150 – CSS Animations, Transformations and Transitions
April 4, 2024 1:37 pm Leave your thoughts
|
CSS Transitons | Transformations | Animations Section 0 Introduction |
|
Section 0A – Introduction |
Introduction
Css Animations allow us to add cool animations to our elements. We can add all kinds of different animations to our web pages using only CSS to do so using these methods, no JS involved. In doing so, it can make a huge impact on the presentation to the pages and also extend interactivity for the user. Even subtle things like hover effects where instead of the colour changing in an instant, it can fade in a 1 second transition for example. In this lecture we will break it all down.
Section 0B – Before We Start
Before we start it is important to note a few things:
Rendering Engines/Vendor Prefix:
Different browsers are made by different companies, thus are built differently. Because of this they use different rendering engines to make things work. Because of this, sometimes we have to use vendor prefixes to make things work across different browsers.
-webkit- – is a HTML/CSS web browser rendering engine for Safari/Chrome.
-moz- – is a HTML/CSS web browser rendering engine for Mozilla Firefox.
-ms- – is a HTML/CSS web browser rendering engine for IE
-o- – is a HTML/CSS web browser rendering engine for Opera
This is why you sometimes see codes like this:
.example {
-webkit-transform: rotate(30deg); /* chrome */
-moz-transform: rotate(30deg); /* mozilla*/
-ms-transform: rotate(30deg); /* internet explorer */
-o-transform: rotate(30deg); /* opera */
transform: rotate(30deg); /* all */
}
Same code is repeated over and over for different vendors to insure it will work across all browsers. You may not always need to add it but before you push your site into alpha, you must beta test it with cross browser checks.
Check out: http://shouldiprefix.com
Section 0C – Differences
The difference between Transitions, Transformations and Animations:
Transitions
Transitions affect your selector and change them over time, they are in effect animations, but animations that go from one state to another state.
Transformations
Transformations, allow you to visually manipulate an element and transform it. This can be animated as well. We can do 2D transformations and 3D transformations.
Animations
Animations allow you to animate elements using keyframes
Also keep in mind that these things can be combined to the desired effect.
|
Section 1 – Transitions /* Included Files Located in Transitions Folder */ |
|
Section 1A – What are Transitions? |
Transitions
Ya know how we learned how to use hover effects to change things like navigation color when we mouseover it? Well transitions are a way to go beyond that. Using a transition we can make the color fade into another colour instead of instantly changing color. Pretty sweet huh?
The CSS transition property listens for changes to specified properties (background-color, width, height, etc.) over time.
Section 1B – The 4 Properties of Transitions
Transitions have 4 properties you can adjust:
.selector {
transition: [transition-property] [transition-duration [transition timing- function] [transition-delay];
}
}
Example:
.box {
height: 300px; width: 300px;
transition: background-color 1s ease;
/*transition: /property/ /duration/ /timing function/ */
transition-delay: 1s; /* /delay/ */
background-color: #000; /* the color we want to start off as */
}
.box:hover {
background-color: #FF0004; /* the color we want to end with on mouseover */
}
Section 1C – Breaking it Down Our Example Code
Lets break down the different aspects of how transitions work
Transition Property
Used to define what property, or properties, you want to apply a transition effect to.
.box {
transition: background-color
Transition Duration
The length of time you want the transition to take.
.box {
transition: background-color 1s
Transition Timing Function
Describes how a transition will proceed over its duration, allowing a transition to change speed during its course.
.box {
transition: background-color 1s ease;
Transition Delay
Used to define a length of time to delay the start of a transition.
.box {
transition: background-color 1s ease; transition-delay: 1s;
Section 1D – Further Explanation
Transition Properties
Can be applied to width, height, color, background color or any other property that has a value that can be changed from one state to another.
Transition Timing Functions
transition-timing-function: ease; /* Keyword values */
transition-timing-function: ease-in; /* Keyword values */
transition-timing-function: ease-out; /* Keyword values */
transition-timing-function: ease-in–out; /* Keyword values */
transition-timing-function: linear; /* Keyword values */
transition-timing-function: step-start; /* Keyword values */
transition-timing-function: step-end; /* Keyword values */
See Examples of how each works here:
https://developer.mozilla.org/en-US/docs/ Web/CSS/transition-timing-function
|
Section 2 – Transformations /* Included Files Located in Transformations Folder */ |
|
Section 2A – Intro |
Transformations
The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling over the X, Y and Z axes. This behaviour does not directly relate to Transition. However, it can be animated. To put it simply, transformations allow us to transform elements in 2D or 3D space.
Section 2B – Please Note
Axis
The X Axis is horizontal
The Y Axis is Vertical
The Z Axis is 3D Perspective
Section 2C – Values
Values
scale(): affects the size of the element. This also applies to the font-size, padding, height, and width of an element, too. It’s also a a shorthand function for the scaleX and scaleY functions.
skewX() and skewY(): tilts an element to the left or right, like turning a triangle into a parallelogram. There is no shorthand skew property. translate(): moves an element sideways or up and down.
rotate(): rotates the element clockwise from its current position. matrix(): Combines all transforms into one.
perspective(): doesn’t affect the element itself, but affects the transforms of descendent elements’ 3D transforms, allowing them all to have a consistent depth perspective.
Section 2D – Breaking it Down
We set 2D transform to scale up a factor of 5
Skew (Vendor Prefix’s Omitted)
.box-skew {
transform: skewX(25deg);
}
We set 2D transform to slew the object 25 Degrees on the
X Axis
|
Translate (Vendor Prefix’s Omitted) .box-translate { transform: translate(500px, 0px); } We move the object, in this example on the X axis 500px to the right and Nil up or down |
Rotate (Vendor Prefix’s Omitted)
.box-rotate {
transform: rotate(75deg);
}
We rotate the selector clockwise 75 Degrees
Matrix (Vendor Prefix’s Omitted)
|
.box-matrix { transform: rotate(5deg) translate(700px, 10px) skewX(-34deg); } We rotate the selector 5 degrees clockwise, move it 100px to the right and down 10px , than skew it -34 degrees on X Axis There is also another way we can write this, and this method is not meant to be calculated in your head. .box-matrix { transform: matrix(0.996195, 0.0871557,-0.759098, 0.937407, 696.465, 70.971); } You can calculate here |
Perspective
.box-perspective1 {
height: 200px;
width: 200px;
border: 2px solid;
border-color: #000;
-webkit-perspective: 250px; /* Chrome */
-moz-perspective: 250px; /* Mozilla */
-ms-perspective: 250px; /* IE */ -o-perspective: 250px; /* Opera */
perspective: 250px;
.box-perspective2 {
height: 200px;
width: 200px;
background-color: #777;
-webkit-transform: rotateX(45deg); /* Chrome */
-moz-transform: rotateX(45deg); /* Mozilla */
-ms-transform: rotateX(45deg); /* IE */
-o-transform: rotateX(45deg); /* Opera */
transform: rotateX(45deg);
}
We make the 1st box to be the outline so we can see the perspective we set as 250px in the parent div take effect on the child div. On the child div we rotate on the X axis 45
Degrees
|
Section 3 – Animations Animations Folder */ |
/* Included Files Located in |
|
Section 3A |
|
Animations use keyframes to make animations work without the need for JS or Flash. It is done purely within CSS. It allows you to change the element from one style to another and you can change as many properties as you like, as many times as you like. You have to specify the keyframes and we will name the animation.
Section 3B Building it up from the ground up
Lets build up the code we will start off with a div, selector and we will make it a box with a background colour.
.box {
background-color: white;
width: 200px;
height: 200px;
position: relative; /* Animation stuff below */ animation-namemyanimation; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease;
}
As of now we just have a 200px by 200px box with a BG colour of white, lets reveal the rest…
.box {
background-color: white;
width: 200px; height: 200px; position: relative; /* Animation stuff below*/
animation-name: myanimation; /* Name the animation */
animation-duration: 4s; /* Give it a duration */
animation-iteration-count: infinite; /* Make it loop (forever) */
animation-timing-function: ease; /* Make it ease as it moves */
}
/* Now we need keyframes these make the animation change as it goes from 0% to 25% to 50% to 75% to 100% Here we can change all kinds of different aspects of the selector to animate it so make sure to experiment! */
/* The code below says we will use some keyframes and calls up the animation name we
made above */
@keyframes myanimation {
/* Starting point | the first translate number moves X Axis the second moves Y Axis */
0% {
background-color: white;
transform: translate(0px, 0px);
border-radius: 0% 0% 0% 0%;
}
/* 25% of the way thru the animation */
25% {
background-color: red;
transform: translate(300px, 0px);
border-radius: 50% 50% 0% 0%;
}
/* 50% of the way thru the animation in this case from here we start moving it back to point
of origin */
50% {
background-color: green;
transform: translate(300px, 300px);
border-radius: 50% 50% 50% 0%;
}
/* 75% of the way thru the animation */
75% {
background-color: blue;
transform: translate(0px, 300px);
border-radius: 50% 50% 50% 50%;
}
/* 100% of the way thru the animation completing the cycle */
100% {
background-color: white;
transform: translate(0px, 0px);
border-radius: 0% 0% 0% 0%;
}
}
Section 3C – Values
|
Specifies the name of the keyframe you want to bind to the selector |
|
Specifies how many seconds or milliseconds an animation takes to complete |
|
|
Specifies the speed curve of the animation |
|
|
Specifies a delay before the animation will start |
|
|
Specifies how many times an animation should be played |
|
|
Specifies whether or not the animation should play in reverse on alternate cycles |
|
|
Specifies what values are applied by the animation outside the time it is executing |
|
|
Specifies whether the animation is running or paused |
Categorised in: Lectures, Portfolio, WEBD 150
This post was written by amax