Week 13: CSS Animations: Transforms and Transitions
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-08-18 21:02:06

---
title: Week 13: CSS Animations: Transforms and Transitions
published: true
description: 
tags: javascript, webdev, codenewbie, beginners
---


####This week focus was on CSS Animations: Transforms and Transitions from Colt Steele The Advanced Web Developer Bootcamp.

     -Introduction to CSS Animations
     -Why Animations Matter
     -Intro To Pseudoclasses
     -Pseudo-Classes: Hover  
     -Pseudo-Classes focus 
     -Pseudo-Classes: Active 
     -Introduction to Transform 
     -Transform: Translate
     -Transform: Scale() and Transform-Origin
     -Transform: Rotate() 
     -Transitions Basics 
     -Transitions-Duration and Transitions-Property
     -Transitions-Timing-Function and Transitions-Delay
     -Transitions Shorthand



###Introduction to CSS Animations 
CSS Animations can make information easier to convey to the end user by being more obvious when to click something or to locate additional resources.  

###Why Animations Matter
CSS Animations can increase accessibility as well as draw attention to details and make things clearer. 
The thing about CSS animations is that getting things to move is easy but planning how they should move is hard. 
###Intro To Pseudoclasses
How to trigger animations
Animations are usually triggered by a scroll, hover or a click. 
Pseudo-classes are commonly used triggers that are special selectors that you add on to another selector. 
```
Selector:pseudo-class {
property: value; 
}
```


###Pseudo-Classes: Hover
```
div:hover {
background: purple; 
}

```
Hover is triggered by a user mousing over. 
  
###Pseudo-Classes Focus 
-Pseudo-Classes focus 
```
input:focus {
color: red; 
}
```
Focus triggers when an element receives focus. Usually inputs will receive a focus. 
```
<input type=”text” /> 
```

###Pseudo-Classes: Active
Active triggers when an element is being activated by user



```
button:active {
color: green; 
}
```
 
###Building An Animated Button 

https://codepen.io/Colt/pen/EXWGam

###Introduction to Transform 
Lets you manipulate the coordinate space of the CSS visual formatting model. 
Lets you move, warp, rotate, and scale elements. 
 

###Transform: Translate
Move something around 
```
div {
transform: translateX(100px); 
} 
```
https://codepen.io/Colt/pen/GEmOjv?editors=1100

  
###Transform: Scale() and Transform-Origin
Scaling alters the size of an element
```
div {
transform: scale(2); 
} 
```
This will double the size of the divs 

###Transform: Rotate()
Using CSS to rotate things
```
div {
transform: rotate(45deg); 
}
```
Rotate is useful for loading icons or for showing any kind of progress on the page that is circular. 

###Transitions Basics 
Transitions Allow us to control animation speed when changing CSS properties. There are 4 transition properties. 
          -transition-duration is how long the change takes 
          -transition-property is the CSS properties we want to transition. You can narrow down which property you want to transition while leaving some properties alone. 
           -transition-timing-function can accelerate the transition process to happen linear over those ten seconds or change 90% of the way very quickly then last 10% take longer. 
          -transition delay once a change is set to occur it can delay it before actually happening by a few seconds or minutes. It makes the transition more noticeable. 



###Transitions-Duration and Transitions-Property
Duration is how long should the transition last. 
Transition-duration: 1s; 
Property is what property should be transitioned.
Transition-property: background; 


###Transitions-Timing-Function and Transitions-Delay
Delay is how long of a delay before the transition starts. 
Transition-delay: 4s; 
Transition-timing-function is what the acceleration curve for the transition. 
Transition-timing-function: ease-in; 

Shorthand is a way to write all the possible transitions in a single line of code. 
Transition: background 1.5s ease-in 1; 
Transition: property, duration, timing-function, delay; 


###Transitions Shorthand
Shorthand is a way to write all the possible transitions in a single line of code. 
Transition: background 1.5s ease-in 1; 
Transition: property, duration, timing-function, delay;