March 2018

CSS Grid Layout: The Repeat Notation

Repeat() is a notation that you can use with the grid-template-columns and grid-template-rows properties to make your rules more concise and easier to understand when creating a large amount of columns or rows. For example, let’s say we have this deffinition for a grid container: .container { display: grid; grid-gap: 10px 15px; grid-template-columns: 1fr 2fr …
Read more

Defining Animations in CSS With @keyframes

@keyframes is the at-rule to define one animation cycle in CSS. You simply provide values for animatable properties on a percentage-based timeline. The syntax it pretty straightforward: @keyframes fancy { 50% { transform: scale(1.4) rotate(80deg); } 80% { transform: scale(1.2) rotate(40deg); } 100% { transform: scale(1) rotate(0deg); } } In the above, we could have …
Read more