14a Reading: CSS Transforms, Transitions, and Animations
What Google Learned From Its Quest to Build the Perfect Team
- for notes I guess this really comes down to what team you want to be a part of to become successful. A team where everyone everyone is comfotable with one another and works togther to get the task done seems to be the best bet.
Transforms
-
new way to position and alter elements
-
The transform property comes in two different settings, two-dimensional and three-dimensional. Each of these come with their own individual properties and values.
-
Transform Syntax-The actual syntax for the transform property is quite simple, including the transform property followed by the value. The value specifies the transform type followed by a specific amount inside parentheses
-
2D Rotate-The transform property accepts a handful of different values. The rotate value provides the ability to rotate an element from 0 to 360 degrees
-
2D Scale-Using the scale value within the transform property allows you to change the appeared size of an element. The default scale value is 1, therefore any value between .99 and .01 makes an element appear smaller while any value greater than or equal to 1.01 makes an element appear larger
-
2D Translate-The translate value works a bit like that of relative positioning, pushing and pulling an element in different directions without interrupting the normal flow of the document
Transitions & Animations
-
for a transition to take place, an element must have a change in state, and different styles must be identified for each state
-
The easiest way for determining styles for different states is by using the :hover, :focus, :active, and :target pseudo-classes.
-
Transitions do a great job of building out visual interactions from one state to another, and are perfect for these kinds of single state changes. However, when more control is required, transitions need to have multiple states. In return, this is where animations pick up where transitions leave off.
-
To set multiple points at which an element should undergo a transition, use the @keyframes rule. The @keyframes rule includes the animation name, any animation breakpoints, and the properties intended to be animated.
-
Once the keyframes for an animation have been declared they need to be assigned to an element. To do so, the animation-name property is used with the animation name, identified from the @keyframes rule, as the property value. The animation-name declaration is applied to the element in which the animation is to be applied to.
8 SIMPLE CSS3 TRANSITIONS THAT WILL WOW YOUR USERS
- fade in, change color, grow and shrink, rotate elements, square to circle, 3d shadow, swing, and inset border
6 buttons animated
CSS3 Animations:Keyframes
404
Pure Bounce Animation
14b: What Google Learned From Its Quest to Build the Perfect Team
What Google Learned From Its Quest to Build the Perfect Team
- for notes I guess this really comes down to what team you want to be a part of to become successful. A team where everyone everyone is comfotable with one another and works togther to get the task done seems to be the best bet.
Things I want to know more about
-
I want to know how to incorporate the animations into my projects coming up and in the future. I think it would be awesome to make something like that.
-
as far as the teams go, I want to be successful when doing team projects so this reading wull continue to help me reach that goal. This is a goal for all future team projects.