CSS CheatSheet


How to remove outline around focused input box or textarea

textarea:focus, input:focus{
    outline: none;
}

CSS animation

.element {
    /* required */
    animation-name: example;
    /* following are optional */
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    /* animation-fill-mode: forwards; */

    /* shorthand: 
    animation: example 5s linear 2s infinite alternate;
    */
}

@keyframes example {
    0% { background-color: red; }
    25% { background-color: blue; }
    50% { background-color: yellow; }
    100% { background-color: green; }

    /* or: 
    from {background-color: red;}
    to {background-color: green;}
    */
}

CSS animation fade in an element

CSS animations don’t work on display property, so we can’t use keyframes to make an element display: none to display: block or anything else.

Instead, we can use opacity. Example code would look like this:

.quote {
  opacity: 0;
  animation-name: example;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes example {
  100%{opacity: 1}
}

CSS transitions

.element {
    transition: width 2s, height 4s;
    /* or all */

Leave a Reply

Your email address will not be published.