An online markdown blog and knowledge repository.
What Google Learned About Teams
CSS Transforms
Transitions and Animations
In the age of information, data, and cubicles, it turns out that collaborative efforts and activities has increased a lot in the last few decades.
But just being "on a team" is not always enough to get beneficial effects.
Some benefits of working with others as a pair or team of 3 or more are:
Teamwork might not be good enough, on its own.
How team members work together is important.
Google created a project, "Aristotle", to research why some teams were very effective while others struggled.
"Norms are the traditions, behavioral standards and unwritten rules that govern how we function when we gather..." [NYT Magazine (Duhigg, Charles)]
These play a part in how a group acts and feels, and maybe how 'attractive' a group might be for some people, but it still does not define how productive or 'efficient' the group is.
Teams that succeed tend to succeed a lot; teams that fail tend to continue failing.
Group 'norms' played a part in teams' effectiveness and ability to succeed.
Teams where everyone had roughly the same amount of time to speak generally performed better than others where few members dominated most conversations.
The Collective IQ of a team that shared speaking time evenly tended to be higher.
Teams where members were aware of how other members were feeling and what their needs were tended to perform better. The example provided was reading people's body language, and allowing a conversation to take a turn, allowing that person to talk-out what they wanted to say, thereby actively participating in the group.
Without a safe-space to speak, some people simply won't speak, which ends up negatively impacting the entire team.
The fear of punishment or reprise for speaking up is enough to keep some people from doing so.
People are more likely to "be themselves" if they are in a safe place, and trust those around them.
One person interviewed for the article said emotional conversations are related to psychological safety.
When a team leaves you feeling exhausted, it is unlikely to be an efficient or successful team.
For the Aristotle project, the question of how to raise developers social awareness of interpersonal queues, when (generally speaking) they just want to work with computers and code, and not so much their feelings.
Mr. Laurent said "...I had separated things in my head into work life and life life. But the thing is, my work is my life. I spend the majority of my time working. Most of my friends I know through work. If I can't be open and honeset at work, then I'm not really living, am I?" [Laurent, a Google employee, interviewed by NYT Magazine (Duhigg, Charles)].
Be yourself.
Be open with your employer and your team mates.
Remember to be empathetic and to allow time for others to talk and contribute.
Help to maintain a safe space for social interactions, to make for better interactions and teamwork.
Since work is a significant part of life, embrace your team as part of your life -- as a family of sorts.
Transforms change html elements including size and position.
The transform property does not enjoy great browser support, so using vendor prefixes to fend against problems is strongly recommended.
.element-class {
/* vendor prefixes */
-webkit-transform: ...;
-moz-transform: ...;
-o-transform: ...;
transform: ...; /* native, overwrites others if supported */
}
Think of transform meaning 'to distort'.
2D transforms operate on x- and y- axes.
3D transforms operate on 2D plus the z- plane.
The origin of a transform is the center of the element.
Note: Think of xyz and length, width, depth.
Rotates an element by n degree units from -360 to 360.
div {
transform: rotate(-100deg);
}
Size: transform: scale(0.01 to >1.01)
Horizontal Size: transform: scaleX(n)
Vertical Size: transform: scaleY(n)
Does not interrupt the normal flow of the document.
Pulls an element away from its normal position.
Same syntax as transform ( translate() translateX() translateY() ).
Use px or percentage units.
Distort elements on X-, Y-, or both Axes.
Use to transform a box or rectangle into a polygon or rhomboid.
Syntax similar to Scale.
Units are in degrees.
Note: This CAN NOT be used on 3D transforms - it must be achieved using other 3D transform properties.
In the Transform: statement include the types of transforms and their settings, in-line, without commas.
section {
transform: rotate(150deg) scale(1.25);
}
The basis or center-point upon which a transform is based can be moved using 'transform-origin'.
Units can be px or percentages.
Single-argument: X- and Y- planes.
Double-argument: (xPlane yPlane).
The "vanishing point".
Apply to the parent element OR as a second property setting in the transform property setting.
Set units in px.
Units can be none or a length measurement.
Tilts the object using x- or y- plane.
Values and units used in transform-origin can be used here.
Determines the vanishing point location.
3-dimensional transforms incorporate the Z-axis.
Changes elements along the Z axis in addition to X and Y.
Transform can take perspective() and rotate settings.
rotateX(), rotateY(), rotateZ().
Rotate units are 'deg'.
#boxone {
transform: perspective(150px) rotateX(25deg);
}
#boxtwo {
transform: perspective(100px) rotateZ(150deg);
}
Scale the box on its Z-axis.
Use with rotate or another transform to see its effect.
#boxthree {
transform: perspective(100px) scaleZ(1.80) rotateY(230deg);
}
Translate on the Z-axis.
Effectively shrinks and expands an elements i.e.: closer or further away, at the viewer's perspective.
Units are in px.
#boxfour {
transform: perspective(100px) translateZ(-20);
}
Cannot be done - use other transform properties to meet the desired effect.
Rotate3d, Scale3d, Transition3D, and Matrix3D support CSS Shorthand.
Experiment first, it is complicated.
Use to manage transformations applied to nested elements.
Allows maintaining 3d space properly when trnasforms are applied to a parent element, and then its child.
.childelement {
transform-style:
}
Causes a fully rotated element to no longer be visible until rotated back.
.alpha {
transform: rotateY(180deg);
}
.bravo {
backface-visibility: hidden;
transform: rotateY(180deg);
}
ShayHowe.com has multiple links at the bottom of the article with more resources on these topics.
Transition and animation effects can be accomplished with little added code in CSS3. When your website pops, it is more interesting, and attracts attention.
Changes the state of an element. In the first example the .box class selector sets the following properties:
Then the pseudo-class :hover is used to apply a different background for when the element is not hovered.
In order to accomplish some compatibility, especially with newer CSS3 properties and older browsers, vendor prefixes are used:
-webkit-*: Android, Chrome, iOS, Safari browsers-moz-*: Firefox browser-ms-*: Microsoft (i.e. IE)-o-*: Opera browserFollow vendor prefixes with the CSS property.
Each line could include a vendor-prefixed property.
The property on its own should be last in the list of properties (after vendor-prefixed ones).
Determines which properties will be altered: transitional-property: property;
Follow that with transition-duration: #s; and transition-timing-function: [linear | ];
Note: Not all properties may be transitioned! Only properties that have a clear set of "in between values", such as color:
Set in seconds as integers or decimal, e.g. '.2s'.
Set one for each transition property.
Multiple transition-property properties will use a single transition-duration: if it is the only one declared.
Assigns a speed of movement calculation type to the transitioning property.
Timing functions use a cubic-bezier curve to calculate timings.
Additional control over each timing function is possible:
cubic-bezier(x1, y1, x2, y2);setp-start;step-stop;steps(number-of-steps, direction);A delay can be added using the property transition-delay:.
Values can be s or 0.s (seconds or milliseconts) of 'stalling time'.
Like many other CSS3 properties, a shorthand version is available.
The order is:
div {
transition: {transition-property transition-duration transition-timing-function transition-delay};
}
Note: Only use commas when targeting multiple transitions.
See this article for transition examples like a cool button click and a card-flip transition.
Many of the same concepts that apply to transitions also apply to animations.
keyframes: @keyframes name { n { properties }};Animations have additional properties:
animation-name: slide;: Defines which keyframe rule to apply to.Animations that call on an animation name share properties with transitions.
animation-duration: seconds;animation-timing-function: function;animation-delay: seconds;Additional setings of animations include the number of times an animation runs and the direction it completes.
animation-iteration-count: infinite | count;animation-direction: normal | reverse | alternate | alternate-reverse;animation-play-state: running | paused;animation-fill-mode: none | forward | backward | both;Like many other CSS3 properties, a shorthand version is available.
The order is:
div {
animation: {animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state};
}
See the collection of links at the end of the Animation section.
Sarah Vieira writes, in a 2014 article, about hardware accelerated css rules that will help improve website design and interest, with very few lines of code. This is a general overview highlighting key points.
transition: all 0.3s ease;opacity:0.5; and opacity:1.0;background: some_other_color;.grow:hover { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }.rotate:hover { transform: rotateZ(90deg);}.circle:hover { transform: border-radius: 50%; }.three-d-shadow:hover { box-shadow: 1px 1px #color, 2px 2px #color, 3px 3px #color; }@keyframesand transform: translateX(), then apply it e.g. swing.hover { animation: swing 1s ease; animation-iteration-count: 1;}.border:hover { box-shadow: inset 0 0 0 25px #color; }Note: Remember to include back-level browser properties e.g. -webkit-transform, -ms-transform, etc.
Create two CSS3 rules that target the specific element to fade and apply a :hover pseudo element to one of them:
.fade {
opacity: 0.5;
}
.fade:hover {
opacity:1;
}
### Change Color
```css
.color:hover {
background:#53a7ea;
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
.shrink:hover {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
.rotate:hover{
-webkit-transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}
.circle:active{
-webkit-animation: swing 0.5s ease;
animation: swing 0/5s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.circle:hover{
border-radius:50%;
}
.threed:hover{
box-shadow: 1px 1px #53a7ea,
2px 2px #53a7ea,
3px 3px #53a7ea;
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
.swing:hover
{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.border:hover{
box-shadow: inset 0 0 0 10px #53a7ea;
}
Recall that multiple CSS3 selectors can be added to a class attribute in a space-separated list.
<div class="border circle">Inset Border</div>
When the element renders, CSS3 rules from BOTH class selectors will apply:
.border:hover{
box-shadow: inset 0 0 0 10px #53a7ea;
}
.circle:hover{
border-radius:50%;
}
This way the page can leverage both CSS selectors independantly, perhaps pointing to other similar elements that should only render one effect or the other.
ShayHow.com css transitions and animations
This links to a codepen.io environment similar to replit.com, and displays the HTML and CSS3 necessary to animate 3 buttons that move up and down. Pseudo-class 'hover' has CSS3 rules that stop the up-and-down translation animation, stopping the buttons motions.
This is a codepen.io demonstration using keyframes to animate a ball (a child div) with position: absolute; set, inside of a box (parent div).
Both divs are set with inline styles that set the animation to keyframes by name ('bouncing').
The properties set in the keyframe definition sets timing, starting and animated relative locations (in px) to create the illusion of movement.
Keyframe Animation in codepen.io [akshaychauhan, codepen.io animation designer]
Another codepen.io demonstration animates the number 404 using multiple keyframes.
Keyframe Animation in codepen.io [Kieran Hunter]
CSS as an artform 101: codepen.io_ [David Lewis]