Note: 1rem is usually 16px.
@keyframes defines an animation that has two states, where the element changes opacity and is translated up on the 2D plane using transform: translate3d(). Using a single axis translation on transform: translate3d() improves the performance of the animation.
.bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the center.
.bouncing-loader > div, targets the three child divs of the parent to be styled. The divs are given a width and height of 1rem, using border-radius: 50% to turn them from squares to circles.
margin: 3rem 0.2rem specifies that each circle has a top/bottom margin of 3rem and left/right margin of 0.2rem so that they do not directly touch each other, giving them some breathing room.
animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.
nth-child(n) targets the element which is the nth child of its parent.
animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.
✅ No caveats.
Resets the box-model so that widths and heights are not affected by their borders or padding.
<div class="box">border-box</div>
+Note: 1rem is usually 16px.
@keyframes defines an animation that has two states, where the element changes opacity and is translated up on the 2D plane using transform: translate3d(). Using a single axis translation on transform: translate3d() improves the performance of the animation.
.bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the center.
.bouncing-loader > div, targets the three child divs of the parent to be styled. The divs are given a width and height of 1rem, using border-radius: 50% to turn them from squares to circles.
margin: 3rem 0.2rem specifies that each circle has a top/bottom margin of 3rem and left/right margin of 0.2rem so that they do not directly touch each other, giving them some breathing room.
animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.
nth-child(n) targets the element which is the nth child of its parent.
animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.
✅ No caveats.
Resets the box-model so that widths and heights are not affected by their borders or padding.
<div class="box">border-box</div>
<div class="box content-box">content-box</div>
html {
box-sizing: border-box;
@@ -338,8 +338,8 @@ li::before {
var el = document.querySelector('.el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')
-transition: max-height: 0.5s cubic-bezier(...) specifies that changes to max-height should be transitioned over 0.5 seconds, using an ease-out-quint timing function.overflow: hidden prevents the contents of the hidden element from overflowing its container.max-height: 0 specifies that the element has no height initially..target:hover > .el specifies that when the parent is hovered over, target a child .el within it and use the --max-height variable which was defined by JavaScript.el.scrollHeight is the height of the element including overflow, which will change dynamically based on the content of the element.el.style.setProperty(...) sets the --max-height CSS variable which is used to specify the max-height of the element the target is hovered over, allowing it to transition smoothly from 0 to auto.Creates a shadow box around the text whern it is hovered.
<p class = "hover-shadow-box-animation"> Box it! </p>
-.hover-shadow-box-animation{
+transition: max-height: 0.5s cubic-bezier(...) specifies that changes to max-height should be transitioned over 0.5 seconds, using an ease-out-quint timing function.overflow: hidden prevents the contents of the hidden element from overflowing its container.max-height: 0 specifies that the element has no height initially..target:hover > .el specifies that when the parent is hovered over, target a child .el within it and use the --max-height variable which was defined by JavaScript.el.scrollHeight is the height of the element including overflow, which will change dynamically based on the content of the element.el.style.setProperty(...) sets the --max-height CSS variable which is used to specify the max-height of the element the target is hovered over, allowing it to transition smoothly from 0 to auto.Creates a shadow box around the text whern it is hovered.
<p class="hover-shadow-box-animation">Box it!</p>
+.hover-shadow-box-animation {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
@@ -348,11 +348,13 @@ el.style.setProperty('--max-height', height + 'px')
transition-duration: 0.3s;
transition-property: box-shadow, transform;
}
-.hover-shadow-box-animation:hover, .hover-shadow-box-animation:focus, .hover-shadow-box-animation:active{
- box-shadow: 1px 10px 10px -10px rgba(0,0,24,0.5);
- transform: scale(1.2);
+.hover-shadow-box-animation:hover,
+.hover-shadow-box-animation:focus,
+.hover-shadow-box-animation:active {
+ box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
+ transform: scale(1.2);
}
-Box it!
Box it!
display: inline-block to set width and length for p element thus making it an inline-block.transform: perspective(1px) to give element a 3D space by affecting the distance between the Z plane and the user and translate(0) to reposition the p element along z-axis in 3D space.box-shadow: to set up the box.transparent to make box transparent.transition-property to enable transitions for both box-shadow and transform.:hover to activate whole css when hovering is done until active.transform: scale(1.2) to change the scale, magnifying the text.✅ No caveats.
Creates an animated underline effect when the text is hovered over.
Credit: https://flatuicolors.com/
<p class="hover-underline-animation">Hover this text to see the effect!</p>
+Box it!
display: inline-block to set width and length for p element thus making it an inline-block.transform: perspective(1px) to give element a 3D space by affecting the distance between the Z plane and the user and translate(0) to reposition the p element along z-axis in 3D space.box-shadow: to set up the box.transparent to make box transparent.transition-property to enable transitions for both box-shadow and transform.:hover to activate whole css when hovering is done until active.transform: scale(1.2) to change the scale, magnifying the text.✅ No caveats.
Creates an animated underline effect when the text is hovered over.
Credit: https://flatuicolors.com/
<p class="hover-underline-animation">Hover this text to see the effect!</p>
.hover-underline-animation {
display: inline-block;
position: relative;
diff --git a/index.html b/index.html
index 057b2e7de..d1910cd78 100644
--- a/index.html
+++ b/index.html
@@ -1412,9 +1412,9 @@ el.style.setProperty('--max-height', height + 'px')
Hover Shadow Box Animation
Creates a shadow box around the text whern it is hovered.
- HTML
<p class = "hover-shadow-box-animation"> Box it! </p>
+ HTML
<p class="hover-shadow-box-animation">Box it!</p>
- CSS
.hover-shadow-box-animation{
+ CSS
.hover-shadow-box-animation {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
@@ -1423,14 +1423,16 @@ el.style.setProperty('--max-height', height + 'px')
transition-duration: 0.3s;
transition-property: box-shadow, transform;
}
-.hover-shadow-box-animation:hover, .hover-shadow-box-animation:focus, .hover-shadow-box-animation:active{
- box-shadow: 1px 10px 10px -10px rgba(0,0,24,0.5);
- transform: scale(1.2);
+.hover-shadow-box-animation:hover,
+.hover-shadow-box-animation:focus,
+.hover-shadow-box-animation:active {
+ box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
+ transform: scale(1.2);
}
Demo
- Box it!
+ Box it!
-
- Box it!
-
-
-
Explanation