# CSS Cheatsheet

• Pulse Animation
• clamp(min, val, max)
• Grid
  • Grid Two Column Layouts
    • Grid with fluid column and fixed column (non-responsive)
  • Auto Grid
  • Change between row and column with grid-auto-flow
• Transition
  • Transition element from left to right

# Pulse Animation

Pulses the opacity

<style>
    @keyframes pulse {
        50% {
            opacity: .1
        }
    }
    .animate-pulse-slow {
        animation: pulse 3s ease-in-out infinite;
    }
</style>

<div class="flex">
    <img style="animation-duration: 1s" src="/svg/blur-red.svg" class="wh-10 animate-pulse-slow">
    <img style="animation-duration: 2s" src="/svg/blur-pink.svg" class="wh-10 animate-pulse-slow">
    <img src="/svg/blur-yellow.svg" class="wh-10 animate-pulse-slow">
</div>

# clamp(min, val, max)

min The minimum value is the smallest (most negative) value. This is the lower bound in the range of allowed values. If the preferred value is less than this value, the minimum value will be used.

val The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.

max The maximum value is the largest (most positive) expression value to which the value of the property will be assigned if the preferred value is greater than this upper bound.

# Grid

# Grid Two Column Layouts

# Grid with fluid column and fixed column (non-responsive)

grid-template-columns: 3rem 1fr;

/* 3 columns equal widths */
grid-template-columns: repeat(3, 1fr);

# Auto Grid

The smallest we can get is {n}rem and the 1fr says get as big as you can get until you can get until you can fit another item in at the smallest

/* 3 columns equal widths */
grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));

grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));

# Change between row and column with grid-auto-flow

.columns { grid-auto-flow: column; }

@media (min-width:40rem){
    .columns { grid-auto-flow: row; }
}

# Transition

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

The transition get applied to the main class, not the class to be transitioned.

transition: [property] [duration] [timing-function] [delay];
transition-property:
transition-delay:
transition-duration:
transition-timing-function: [ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end]

You can specify a particular property, use a value of all, or use a comma separate value sets to do different transitions on different properties:

/* single property */
.element { transition: background-color 1s ease-in; }
/* all transitions */
.element { transition: all 1s ease-in; }
/* selected properties */
.element { transition: background 0.2s ease, padding 0.8s linear; }

.element:hover { background-color: blue; padding: 3rem; }

# Transition element from left to right

.bx.example2 { background: hsl(200, 100%, 20%0;) }
.child { width: 300px; transition: all 2s; }
.bx.example2:hover .child {  transform: translateX(100%); }