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 */