A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). Commonly used pseudo-classes to trigger animations include hover, focus and active
Resource(s): MDN reference: Pseudo-classes [link] CodePen - CSS Psuedo-class Triggers [link]
/* No space allowed among "selector", ":" & "pseudo-class"! */
selector:pseudo-class {
property: value;
}
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it
div:hover{
background:purple;
}
Resource(s): MDN reference: :hover [link]
The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's "tab" key.
/* Selects any <input> when focused */
input:focus {
color: red;
}
Resource(s): MDN reference: :focus [link]
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button and ends when it is released. The :active pseudo-class is commonly used on <a> and <button> elements, but may be used on other elements, too.
/* Selects any <a> that is being activated */
a:active {
color: red;
}
Resource(s): MDN reference: :active [link]
You can create animation effect on a button with box-shadow & top
Syntax box-shadow: x-offset y-offset color;
Resources: CodePen - Button Starter Code [link] CodePen - Button Completion Code [link]
.btn {
/* Remove default properties*/
outline: none;
border: none;
/* Base state */
box-shadow: 0 6px #efa424;
}
.btn:hover {
box-shadow: 0 4px #efa424;
top: 2px;
}
.btn:active {
box-shadow: none;
top: 6px;
}
TRANSFORM lets you move, warp, rotate and scale elements. Click here [here] for MDN doc.
/* Syntax */
/* Keyword values */
transform: none;
/* Function values */
transform: functionName();
Although transform functions are discussed separately below, in practice, you need to put these functions on the same line.
div:hover { transform: scale(2) rotate(45deg); }
Let you move something around by using functions translateX(), translateY() and translate(). Click [here] for a Translation demo
div:hover {
transform: translateX(100px);
}
transform:scale() lets you alter the size of an element. Click [here] for MDN doc on the scale() function.
div {
/* double the size of div */
transform: scale(2);
/* shrink to half the size of div */
transform: scale(0.5);
/* custom sizing on x & y coordinates*/
transform: scale(0.5, 2);
}
The transform-origin CSS property sets the origin for an element's transformations. The transform "originate" from the top left corner. Click [here] for MDN doc on transform-origin.
.transformed {
transform: scale(2);
transform-origin: 20px 0;
}
Click [here] for a scale() and transform-origin demo.
Using CSS to rotate things. The axis of rotation passes through an origin, defined by the transform-origin CSS property. The default origin is center. Click [here] for a demo. Click [here] for MDN doc.
div {
transform: rotate(45deg);
}
.example {
transition: all .5s;
}
.example {
/* With vendor prefixes */
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
For details on vendor prefixes, click [here]. There are online tools known as Auto Prefixer to automatically insert vendor prefixes in your code, click [here] for an example.
Transitions allow us to control animation speed when changing CSS properties e.g. double the size of this div over 3 seconds. There are 4 transition properties that we can control:
For MDN doc on Transitions, click [here]. For a simple transition demo, click [here].
The property transition-duration determines how long a transition lasts. For a demo, click [here].
transition-duration:0.3s;
/* 2 different durations
for items specified in transition-property */
transition-duration:0.3s, 1s;
The property transition-property specifies what properties should be transitioned.
/* default */
transition-property: all;
transition-property: background;
transition-property: color, opacity;
transition-property: transform;
The property transition-delay specifies how long of a pause before the transition starts.
transition-delay: 4ms;
/* 2 different delays
for items specified in transition-property */
transition-delay: 5ms, 1s;
The property transition-timing-function controls the acceleration curve for the transition.
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: linear;
For MDN doc on transition-timing-function, click [here]. For a demo, click [here].
Additional resources on Easing:
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.
/* Shorthand Transitions */
.animated{
/* Apply to 2 properties */
transition: transform 2s ease-out 1s,
background-color 0.5s linear;
}
For MDN doc on Shorthand Transitions, click [here]. For a demo, click [here].
There are 2 important questions on performance:
transform: translate();transform: scale();transform: rotate();opacityThe second question relates to how rendering process works in a browser. Refer to the article "High Performance Animations" [Link]for details.
Structure: Background color + Background image + icon Click [here] for a demo
<h1>An Image Gallery</h1>
<div class="container">
<div class="item red">
<img src="https://preview.ibb.co/gQbzQ5/colt_steele_firemarshall.jpg"/>
<i class="fa fa-camera"></i>
</div>
<div class="item blue">
<img src="http:i.imgur.com/AhCfhrF.jpg"/>
<i class="fa fa-paw"></i>
</div>
<div class="item green">
<img src="http://preview.ibb.co/kd9Esk/colt_steele_smugglerscave.jpg"/>
<i class="fa fa-cloud"></i>
</div>
</div>
Image: Create fade-out effect by changing the img opacity and display the underlying background as we hover over it :hover
div.item:hover img{
/* Fade-out effect */
opacity: 0.3;
filter: grayscale(100%);
}
Transition: We include an "*" after item so that the transition transition shorthand can affect the other "layers" i.e. image and icon
div.item * {
transition: all 0.35s ease-in-out;
}
Icon: The icons are set to invisible initially transform.scale(). The icon will show as we hover over it. We also need to center the icon transform.translate() at each stage as each transformation overwrites the values already set.
div.item i {
/* Invisible */
transform: translate(-50%, -50%) scale(0);
}
div.item:hover i {
/* Show icon */
transform: translate(-50%, -50%) scale(1);
}